How gustavocasaroti/bpmn-academy works
BPMN Academy is a browser-based learning platform for understanding and practicing BPMN 2.0; progress is stored locally rather than on a server. Learners browse lessons, symbols, and annotated examples, then practice through laboratory challenges or quizzes; the app records progress, XP, and achievements. The graph preserves the documented content branches and the sampled rendering, validation, simulation, and progress layers. Some feature links rely on README descriptions or source-index references; unsampled implementation details are not inferred.
Main entry points: store.tsx Progress store · [challengeId]/page.tsx Challenge session · DiagramView.tsx Diagram renderer · [moduleId]/page.tsx Lesson view
Components 26
Learning path
- Get started
app/page.tsx - Dashboard
app/(app)/dashboard/page.tsx - Learning modules
data/modules.ts - Lesson view
app/(app)/trilha/[moduleId]/page.tsx
BPMN reference
- Symbol library
app/(app)/simbolos/page.tsx - BPMN symbols
data/symbols.ts - Process examples
app/(app)/exemplos/page.tsx - Example detail
app/(app)/exemplos/[id]/page.tsx - Example content
data/examples.ts
Practice and assessment
- Challenge list
app/(app)/laboratorio/page.tsx - Challenge session
app/(app)/laboratorio/[challengeId]/page.tsx - Challenge content
data/challenges.ts - Diagram validation
lib/validate.ts - Process simulation
lib/simulation.ts - Quiz page
app/(app)/quiz/page.tsx - Quiz runner
components/quiz/QuizRunner.tsx - Quiz questions
data/quiz.ts
Progress and state
- Achievements
app/(app)/conquistas/page.tsx - Progress rules
lib/progress.ts - Progress store
lib/store.tsx
Shared interface
- Diagram renderer
components/bpmn/DiagramView.tsx - BPMN glyphs
components/bpmn/BpmnGlyph.tsx - Lesson content blocks
components/dashboard/ContentBlocks.tsx - App shell
components/layout/AppShell.tsx - Navigation and modes
data/config.ts
Other components
- Learner
Connections 28
- Learner → Get started: starts at
- Learner → Dashboard: opens
- Dashboard → Progress store: reads progress
app/(app)/dashboard/page.tsx - Dashboard → Learning modules: summarizes
app/(app)/dashboard/page.tsx - Lesson view → Learning modules: loads lessons
app/(app)/trilha/[moduleId]/page.tsx - Lesson view → Lesson content blocks: renders content
app/(app)/trilha/[moduleId]/page.tsx - Lesson view → Progress store: updates progress
app/(app)/trilha/[moduleId]/page.tsx - Symbol library → BPMN symbols: browses
app/(app)/simbolos/page.tsx - Process examples → Example content: lists examples
app/(app)/exemplos/page.tsx - Example detail → Example content: loads example
app/(app)/exemplos/[id]/page.tsx - Example detail → Diagram renderer: renders diagram
app/(app)/exemplos/[id]/page.tsx - Example detail → Process simulation: simulates example
app/(app)/exemplos/[id]/page.tsx - Challenge list → Challenge content: lists challenges
app/(app)/laboratorio/page.tsx - Challenge session → Challenge content: loads challenge
app/(app)/laboratorio/[challengeId]/page.tsx - Challenge session → Diagram validation: validates diagram
app/(app)/laboratorio/[challengeId]/page.tsx - Challenge session → Process simulation: runs simulation
app/(app)/laboratorio/[challengeId]/page.tsx - Challenge session → Diagram renderer: renders diagram
app/(app)/laboratorio/[challengeId]/page.tsx - Challenge session → Progress store: records completion
app/(app)/laboratorio/[challengeId]/page.tsx - Quiz page → Quiz runner: starts quiz
app/(app)/quiz/page.tsx - Quiz runner → Quiz questions: selects questions
components/quiz/QuizRunner.tsx - Quiz runner → Progress store: records results
components/quiz/QuizRunner.tsx - Achievements → Progress store: reads progress
app/(app)/conquistas/page.tsx - Achievements → Progress rules: shows achievements
app/(app)/conquistas/page.tsx - Progress store → Progress rules: evaluates achievements
lib/store.tsx - Progress store → Learner: persists locally
- Diagram renderer → BPMN glyphs: renders nodes
components/bpmn/DiagramView.tsx - Lesson content blocks → Diagram renderer: renders diagrams
components/dashboard/ContentBlocks.tsx - App shell → Navigation and modes: uses navigation
components/layout/AppShell.tsx