Mermaid Diagrams

Docboot provides built-in, lazy-loaded Mermaid diagram support without plugins or extra configuration.

1. Flowchart Example #

```mermaid
graph TD
  MD[Markdown Files] --> Scanner[Filesystem Scanner]
  Scanner --> Compiler[Markdown Compiler]
  Compiler --> HTML[Static Semantic HTML]
  Compiler --> MiniSearch[Local Search Index]
  HTML --> Dist[dist/ Portable Output]
  MiniSearch --> Dist
```

graph TD
  MD["Markdown Files"] --> Scanner["Filesystem Scanner"]
  Scanner --> Compiler["Markdown Compiler"]
  Compiler --> HTML["Static Semantic HTML"]
  Compiler --> MiniSearch["Local Search Index"]
  HTML --> Dist["dist/ Portable Output"]
  MiniSearch --> Dist

graph TD
  MD[Markdown Files] --> Scanner[Filesystem Scanner]
  Scanner --> Compiler[Markdown Compiler]
  Compiler --> HTML[Static Semantic HTML]
  Compiler --> MiniSearch[Local Search Index]
  HTML --> Dist[dist/ Portable Output]
  MiniSearch --> Dist

2. Sequence Diagram Example #

```mermaid
sequenceDiagram
  autonumber
  actor Developer
  participant Browser
  participant Docboot
  participant MiniSearch

  Developer->>Browser: Types npx docboot .
  Browser->>Docboot: Request /
  Docboot-->>Browser: Static HTML & CSS
  Developer->>Browser: Presses Cmd + K
  Browser->>MiniSearch: Lazy-load Search Runtime
  MiniSearch-->>Browser: In-Browser Local Search Results
```

sequenceDiagram
  autonumber
  actor Developer
  participant Browser
  participant Docboot
  participant MiniSearch

  Developer->>Browser: Types npx docboot .
  Browser->>Docboot: Request /
  Docboot-->>Browser: Static HTML & CSS
  Developer->>Browser: Presses Cmd + K
  Browser->>MiniSearch: Lazy-load Search Runtime
  MiniSearch-->>Browser: In-Browser Local Search Results

sequenceDiagram
  autonumber
  actor Developer
  participant Browser
  participant Docboot
  participant MiniSearch

  Developer->>Browser: Types npx docboot .
  Browser->>Docboot: Request /
  Docboot-->>Browser: Static HTML & CSS
  Developer->>Browser: Presses Cmd + K
  Browser->>MiniSearch: Lazy-load Search Runtime
  MiniSearch-->>Browser: In-Browser Local Search Results

Features #

• Lazy Loading: If a document contains no diagrams, Mermaid JavaScript is never downloaded.
• Theme-Aware Rendering: Diagrams automatically adapt to your active theme mode (dark / light) and re-render seamlessly when you toggle themes.
• Interactive Modal & Pan-Zoom: Hover over any diagram and click Expand Diagram to open a full-screen view with interactive pan and zoom controls for large architecture graphs.

Next Steps #

• Local Search Architecture — Client-side search indexing
• Themes & Customization — Color presets and typography
• Rich Content Primitives — Callouts, tabs, and details