excalidraw-diagram vs drawio-diagram: hand-drawn or formal?

excalidraw-diagram and drawio-diagram are both by 小帅同学 / @xstongxue and live in the same skill collection. They solve overlapping problems with opposite aesthetics.

Side by side

	excalidraw-diagram	drawio-diagram
Output format	.excalidraw JSON	.drawio XML
Aesthetic	Hand-drawn, sketchy	Crisp, formal
Edit in	Excalidraw, Obsidian, VS Code	app.diagrams.net, VS Code, Confluence
Audience signal	”Thinking out loud"	"Architecture document”
ML-aware shapes	No	Yes (attention heads, conv layers, residual conn.)
Style migration	No	Yes — give a reference image, match its style
Best for	README, internal docs, research notes	Papers, architecture docs, formal specs

excalidraw-diagram — hand-drawn vibe

Output is .excalidraw JSON, the format used by Excalidraw, Obsidian’s Excalidraw plugin, and the VS Code extension. The aesthetic is deliberately sketchy — wavy lines, hand-lettered feel, charm of imperfection.

Use it when:

• Your audience is your team / your future self.
• The diagram signals “thinking”, not “finished”.
• You’ll iterate by hand after the first AI pass.

drawio-diagram — formal precision

Output is standard .drawio XML. Crisp lines, precise alignment, the visual language of academic papers and technical documentation. Has two modes:

• Generate from scratch — describe a model architecture, get a diagram. ML-aware: knows how to depict attention heads, convolutions, residual connections.
• Style migration — give it a reference image (e.g. a paper figure you like) plus your content. Output matches the reference’s visual style.

Use it when:

• The diagram goes in a paper, formal doc, or stakeholder presentation.
• Visual consistency across many diagrams matters (use style migration once, apply to all).
• You’re describing an ML architecture and want correct shape vocabulary.

30-second decision

README / internal team docs?            → excalidraw-diagram
Academic paper figure?                  → drawio-diagram
Casual research notes?                  → excalidraw-diagram
Need consistent visual style across N?  → drawio-diagram (style migration)
Picking a vibe over precision?          → excalidraw-diagram
Picking precision over vibe?            → drawio-diagram
ML architecture (attention/conv/etc)?   → drawio-diagram (ML-aware shapes)

Pipeline: a paper figure stack

For a typical ML paper, the right combination of all three diagram skills:

1. drawio-diagram for the model architecture overview (formal, ML-aware).
2. mermaid-tools for algorithm flow / pseudocode adjacent diagrams (PNG render of Markdown).
3. excalidraw-diagram for the conceptual “what’s wrong with prior approach” sketch in the introduction.

Same paper, three vocabularies — each diagram signals what tier of formality applies to that section.

See also: AI diagram skills guide — three skills compared