AI diagrams in 2026: mermaid vs drawio vs excalidraw skills
Three Claude Code skills for AI-generated architecture diagrams, flowcharts, and ML model visualizations. Mermaid for Markdown blogs, Drawio for formal docs, Excalidraw for hand-drawn vibe — when to pick each.
Architecture diagrams, ML model visualizations, business flowcharts — these used to take hours in Visio or 30 minutes in Figma. The Claude skill ecosystem has three skills that each take a different angle on the same problem: turn natural language or structured input into a real diagram file you can keep editing.
This post compares them and shows when to pick which.
The three contenders
| Skill | Output format | Vibe | Editable in | Install |
|---|---|---|---|---|
| mermaid-tools | .png | Tidy, technical | GitHub / blog | npx degit daymade/claude-code-skills/mermaid-tools |
| drawio-diagram | .drawio XML | Formal, ML-aware | app.diagrams.net | npx degit xstongxue/best-skills/skills/drawio-diagram |
| excalidraw-diagram | .excalidraw JSON | Hand-drawn | Excalidraw / Obsidian / VSCode | npx degit xstongxue/best-skills/skills/excalidraw-diagram |
mermaid-tools — for Markdown-first workflows
mermaid-tools is the smallest of the three. It
extracts ```mermaid blocks from Markdown, renders each to high-resolution PNG,
and saves the output preserving the diagram’s title as filename.
Why a separate render step? GitHub renders Mermaid natively. Most other platforms (Medium, Substack, WeChat 公众号, exported PDFs) don’t. If your content goes anywhere besides GitHub, you need a PNG.
Use mermaid-tools when:
- You already write Mermaid in Markdown.
- You publish to platforms that don’t render Mermaid.
- You want 2x or 3x retina-density PNG without configuring puppeteer yourself.
It pairs naturally with wechat-article-writer
— the writer creates the article, mermaid-tools pre-renders the diagrams
for the WeChat editor.
drawio-diagram — for formal documentation
drawio-diagram by @xstongxue
generates standard .drawio XML — the format used by app.diagrams.net,
Confluence’s Draw.io integration, and the VS Code Draw.io extension. The
output is fully editable, not flattened to image.
Two modes:
-
Generate from scratch — describe a model architecture, get a diagram. The skill is ML-aware: it knows how to depict attention heads, conv layers, residual connections, normalization layers as their conventional shapes.
-
Style migration — give it a reference image (e.g. a diagram from another paper that you like the look of) plus your content; it produces a new diagram in the reference’s visual style.
Use drawio-diagram when:
- The diagram needs to look formal — academic papers, internal architecture docs, technical specs.
- You’ll be editing in Draw.io after the AI’s first pass.
- You need a consistent visual style across many diagrams (use style migration on the first one, then chain).
excalidraw-diagram — for hand-drawn vibe
excalidraw-diagram, also by xstongxue, is
the playful sibling. It generates .excalidraw JSON — the format used by
Excalidraw itself, Obsidian’s Excalidraw plugin, and the VSCode extension.
The output is fully editable and has the characteristic hand-drawn,
sketchy aesthetic.
Use excalidraw-diagram when:
- The vibe matters more than the formality (informal team docs, README diagrams, research notes).
- You want to iterate by hand after the AI’s first pass — Excalidraw’s sketchy style is forgiving of imperfect alignment.
- You publish in Obsidian / Logseq / Notion and want diagrams that match the note-taking aesthetic.
How to pick in 30 seconds
Output goes in a Markdown blog post → mermaid-tools (render to PNG)
Output is a formal architecture diagram → drawio-diagram
Output is a sketchy / informal diagram → excalidraw-diagram
You'll keep editing the diagram by hand → drawio-diagram or excalidraw-diagram
You'll never edit it again → mermaid-tools (PNG is final)Pipeline: ML paper figure
Suppose you’re writing a paper about a Transformer variant. You need:
-
Architecture overview — the high-level model diagram. Use
drawio-diagramwith style migration from a reference paper. Output.drawioyou’ll keep editing in app.diagrams.net. -
Algorithmic flow — pseudocode-adjacent diagram for the inference path. Use
mermaid-tools— write the diagram in Mermaid syntax inside your Markdown draft, render to PNG when you compile to PDF. -
Conceptual sketch — a “what’s wrong with the existing approach” illustration in the introduction. Use
excalidraw-diagram— its hand-drawn vibe signals “thinking out loud” appropriately.
This three-skill chain covers the full diagrammatic vocabulary of an ML paper.
What’s missing
-
None of the three handle 3D diagrams. For 3D (e.g. neural network layer visualization in 3D), you’ll need a custom Three.js render — none of the current skills wrap that.
-
No diagram-to-code skill yet. Reverse direction (handwritten sketch → diagram code) requires OCR + structure extraction; not in any of these skills today.
-
No collaborative diagram editing. All three are single-author tools. For team diagrams, version-control the source files.
Pairs with
mermaid-tools+wechat-article-writer— pre-render diagrams for WeChat publishing.drawio-diagram+pptgen-drawio— generate the deck and the architecture diagrams in compatible formats.excalidraw-diagram+ Obsidian — drop the JSON straight into your vault.
Browse all diagram-related skills →