Skip to content

Diagram Assets

This folder keeps both source and rendered diagrams used by documentation.

Structure:

  • docs/diagrams/mermaid: editable Mermaid source (.mmd)
  • docs/diagrams/images: rendered image assets used in docs

Rendering strategy:

  1. Maintain Mermaid source for easy review/diff.
  2. Render SVG (preferred for crisp scaling) and optional PNG for compatibility.
  3. Reference only rendered images from documentation files.

Render command example:

npx -y @mermaid-js/mermaid-cli -i docs/diagrams/mermaid/architecture-overview.mmd -o docs/diagrams/images/architecture-overview.svg -t neutral -b transparent

For environments with Chromium sandbox restrictions, use the included Puppeteer config:

npx -y @mermaid-js/mermaid-cli -p docs/diagrams/puppeteer-config.json -i docs/diagrams/mermaid/architecture-overview.mmd -o docs/diagrams/images/architecture-overview.svg -t neutral -b transparent

High-resolution PNG render example:

npx -y @mermaid-js/mermaid-cli -p docs/diagrams/puppeteer-config.json -i docs/diagrams/mermaid/architecture-overview.mmd -o docs/diagrams/images/architecture-overview.png -t neutral -b transparent -w 2400 -H 1600