Diagrams
ClaudeCursor
Intermediate
Generate Architecture SVGs
Use mmdc CLI to convert Mermaid source into SVG files for docs
45 of 66
Why SVGs?
Mermaid renders in GitHub markdown, but SVGs give you:
- Consistent rendering everywhere
- Version-controlled visual diffs
- Embeddable in any documentation
Install mermaid-cli
npm install -g @mermaid-js/mermaid-cli
Create a .mmd source file
Save your diagram as docs/architecture.mmd:
flowchart TB
User([User]) --> HTML["index.html"]
HTML --> App["app.js"]
App --> State["state.js"]
App --> Render["render.js"]
Generate the SVG
npx mmdc -i docs/architecture.mmd -o docs/architecture.svg --backgroundColor white
Embed in README
## Architecture 
Automation tip
Add a Makefile target:
docs/architecture.svg: docs/architecture.mmd npx mmdc -i $< -o $@ --backgroundColor white