Mermaid Diagrams

JamsEDU uses Mermaid to render diagrams from plain text. Write your diagram definition inside a <pre class="mermaid"> element and JamsEDU will render it when the page loads. How those blocks look (Mermaid theme and built-in dark handling) is covered under Styling below.

You can customize how diagrams load by editing jamsEduConfig.mermaid in assets/js/main.js. Set only the properties you need and anything you omit will use the default values. To disable diagrams entirely, set the whole key to false. For more on how jamsEduConfig works across all built-ins, see Optional Settings.

useMutationObserver: When true (default), new pre.mermaid blocks added to the page after load will automatically trigger a re-render pass through the shared DOM watcher. When false, only diagrams present in the DOM at load time are rendered.
version: The Mermaid version to load from jsDelivr. Currently defaults to 11.14.0.
theme: Passed directly to mermaid.initialize. Currently defaults to 'default'. The built-in JamsEDU CSS expects a light Mermaid theme and applies a dark mode filter on the rendered SVG automatically. See Styling for more details.

Mermaid supports many diagram types. Below are live examples of the most common ones. For the full list of available diagram types and their syntax, see the Mermaid documentation.

Flowchart

Flowcharts support subgraphs, directional layouts, different node shapes, and link styles.

        flowchart TB
            subgraph client["Client tier"]
                direction TB
                U[User] --> UI[Web app shell]
            end
            subgraph services["Services"]
                direction LR
                UI --> GW[API gateway]
                GW --> SVC[Business logic]
                SVC --> DB[(Primary DB)]
                SVC --> CACHE[[Redis cache]]
            end
            U -.->|SSO| GW

A simpler example:

        flowchart LR
            A[Start] --> B{Decision}
            B -->|Yes| C[Do something]
            B -->|No| D[Do something else]
            C --> E[End]
            D --> E

Sequence Diagram

Sequence diagrams show interactions between participants over time. They support autonumbering, activation bars, async messages, and notes.

        sequenceDiagram
            autonumber
            actor U as User
            participant B as Browser
            participant S as Server
            participant J as Job queue
            U->>B: Upload file
            B->>S: POST /import
            activate S
            S->>J: enqueue parse job
            S-->>B: 202 Accepted
            deactivate S
            Note over B,J: Poll or WebSocket for status
            J-->>S: job done
            S-->>B: notify ready
            B-->>U: Show preview

State Diagram

State diagrams visualize the lifecycle of an object or process as it moves through different states.

        stateDiagram-v2
            [*] --> Idle
            Idle --> Draft: create
            Draft --> Review: submit
            Review --> Published: approve
            Review --> Draft: revise
            Published --> Archived: sunset
            Archived --> [*]
            Draft --> Idle: cancel

Class Diagram

Class diagrams show the structure of a system by mapping out classes, their attributes, methods, and relationships.

        classDiagram
            class Repository~T~ {
                <<interface>>
                +save(entity T) void
                +findById(id) T
            }
            class InMemoryStore {
                -Map data
                +save(entity Object) void
            }
            class SqlStore {
                +save(entity Object) void
            }
            Repository <|.. InMemoryStore
            Repository <|.. SqlStore

Entity Relationship Diagram

ER diagrams map out database tables, their columns, and the relationships between them.

        erDiagram
            CUSTOMER ||--o{ ORDER : places
            ORDER ||--|{ LINE_ITEM : contains
            PRODUCT ||--o{ LINE_ITEM : "sold as"
            CUSTOMER {
                uuid id
                string name
                string email
            }
            ORDER {
                uuid id
                date placed_at
            }
            LINE_ITEM {
                int quantity
                decimal unit_price
            }
            PRODUCT {
                uuid id
                string sku
            }

Git Graph

Git graphs visualize branching, commits, and merges in a repository.

        gitGraph
            commit id: "init"
            branch feature-a
            checkout feature-a
            commit id: "add parser"
            commit id: "tests"
            checkout main
            merge feature-a
            commit id: "release"

Pie Chart

Pie charts display proportional data with labeled slices.

        pie showData
            title Estimated time spent (demo)
            "Diagrams" : 40
            "Math" : 25
            "PDF checks" : 20
            "Theme QA" : 15

Styling

Unlike other JamsEDU built-ins, Mermaid controls its own colors inside the rendered SVG. You can change the diagram theme through the theme option under jamsEduConfig.mermaid in assets/js/main.js. The default is 'default'. For the full range of theming options Mermaid supports, see the Mermaid theming documentation.

JamsEDU does provide some baseline styling for the diagram container in css/vendor/jamsedu/jamsedu.css. Diagrams are centered by default, and in dark mode a CSS filter on the rendered SVG inverts the colors so a light Mermaid theme stays readable alongside your other content. You can adjust the container itself with margins, max width, or borders on pre.mermaid, or override the vendor rules in your own CSS. See CSS and Theming for details on import order and layers.