Flowcharts and architecture

These examples stay close to real documentation work: topology, release flow, and runtime pipelines

Workspace architecture

flowchart LR
  Root["workspace root"] --> Package["packages/markdown-it-mermaid-enhanced"]
  Root --> Playground["apps/playground"]
  Root --> VitePress["apps/vitepress"]
  Package --> Runtime["runtime + style exports"]
  Package --> Plugin["markdown-it plugin"]
  VitePress --> Plugin

Loading diagram…

Runtime pipeline

flowchart LR
  Author["author writes markdown"] --> Parse["markdown-it parses fences"]
  Parse --> Wrap["plugin emits wrapper HTML"]
  Wrap --> Hydrate["runtime upgrades the wrapper"]
  Hydrate --> Render["Mermaid.js or Excalidraw renders SVG"]
  Render --> Tools["zoom copy export fullscreen"]

Loading diagram…

Release workflow

flowchart TD
  Change["code or docs change"] --> Validate["bun run test && bun run build"]
  Validate --> Package["package dist output"]
  Package --> ExampleApps["playground and vitepress apps"]
  ExampleApps --> Review["manual review"]
  Review --> Publish["release package"]

Loading diagram…

Height resolution

flowchart TD
  Inline["inline min-height"] --> Result["final wrapper height"]
  CssVar["--mermaid-it-min-height"] --> Result
  Plugin["plugin minHeight"] --> Result
  Default["built-in default"] --> Result

Loading diagram…