Mermaid Diagrams

GDDKit features native support for Mermaid.js, allowing you to create vector flowcharts, sequence diagrams, state machines, and mindmaps directly within your document text.

You don’t need to link external images or use drawing tools—simply write the diagram code, and GDDKit will render it inline in both the Editor Preview and the PDF Export.

---

Writing Diagram Code

To insert a diagram, wrap your Mermaid code block with three backticks followed by the mermaid language identifier:

```mermaid
graph TD
    A[Player Presses Button] --> B{Has Energy?}
    B -- Yes --> C[Trigger Special Attack]
    B -- No --> D[Play Error Sound]
```

---

Supported Diagram Types & Examples

1. Game Flowcharts (graph / flowchart)

Ideal for outlining level choices, weapon upgrades, or game loop logic.

flowchart LR
    Start([Main Menu]) --> Play[New Game]
    Play --> Level1[Level 1: Tutorial]
    Level1 --> Boss{Defeat Boss?}
    Boss -- Yes --> Victory([Victory Screen])
    Boss -- No --> GameOver([Game Over])
    GameOver --> Start

2. State Diagrams (stateDiagram-v2)

Excellent for documenting enemy behavior state machines (AI Patrol vs Attack).

stateDiagram-v2
    [*] --> Patrol
    Patrol --> Chase : Player Spotted
    Chase --> Attack : In Range
    Attack --> Chase : Out of Range
    Chase --> Patrol : Player Lost
    Attack --> [*] : Player Defeated

3. Mindmaps (mindmap)

Use mindmaps to brainstorm design concepts, game mechanics, or lore ideas.

mindmap
  root((Game Concept))
    Art Style
      Pixel Art
      Neon Cyberpunk
    Mechanics
      Double Jump
      Time Rewind
    Platforms
      PC
      Steam Deck

---

How It Works Under the Hood

When you view a section with a Mermaid block:

1. GDDKit’s MermaidDiagramService extracts the diagram text.
2. It compiles the diagram using a local chromium/javascript renderer or calls the secure Mermaid API to fetch a clean vector SVG.
3. The SVG is cached locally in your project cache directory and rendered immediately inside the WPF editor interface.
4. During a PDF export, these vector graphics are embedded directly into the PDF layout without loss of resolution.