drawio vs Excalidraw vs Mermaid vs Penpot

TL;DR + decision tree

• If your diagrams ship in Confluence, Visio, or internal wikis, pick drawio-diagrams-enhanced. It outputs valid drawio.io XML that opens in any drawio editor — Confluence plugin, VSCode extension, the standalone web editor at drawio.io.
• If you want hand-drawn brainstorm sketches, pick excalidraw. It emits Excalidraw JSON with the rough-shape parameters that produce that signature whiteboard aesthetic.
• If your diagrams ship in Markdown PRs and READMEs, pick the Mermaid MCP server. It validates the syntax and returns a fenced code block that GitHub, GitLab, Notion, and Obsidian render inline with zero tooling for the reader.
• If you’re designing UI mockups, not technical diagrams, pick the Penpot MCP server. It’s the open-source Figma alternative with full design components, tokens, and prototyping.

These four are not substitutes — they sit in different layers of the diagramming stack. drawio and Excalidraw are file-system skills the model reads as instructions; Mermaid and Penpot are MCP servers with callable tools. The recipe section for each below shows what a real prompt looks like and what the agent does with it.

What diagram + design tools actually do

The four tools split cleanly along two axes: aesthetic (precise vs sketchy) and consumer (where the diagram is read). drawio and Mermaid sit on the precise side; Excalidraw is sketchy by design; Penpot is the only UI-design tool of the four — it doesn’t make “diagrams” in the technical sense, it produces design files.

The mental model is three categories of output:

1. Diagram-as-source — drawio XML and Mermaid blocks are text files that diff in pull requests. An engineer can hand-edit the file or regenerate it from prompt without losing the rest. drawio fits the enterprise wiki workflow; Mermaid fits the README workflow.
2. Diagram-as-sketch — Excalidraw outputs JSON, but nobody hand-edits that JSON. The point is the rendered image, which carries the “this is a whiteboard” signal that invites discussion. Best for brainstorms, design-doc preludes, and Slack threads where rough is the value.
3. Design file — Penpot produces a multi-screen .penpot project with reusable components, design tokens, and prototyping links. The output is the Figma equivalent — a tool the design team opens to iterate, not a static image.

If you’re new to skills versus servers, the distinction matters here: skills are activated by description (the model reads SKILL.md when your prompt matches), servers expose tools the model calls. drawio and Excalidraw are skills — the model writes the output text inline. Mermaid and Penpot are servers — they have a tool surface that validates, renders, or persists files. See Skills vs MCP vs Subagents vs CLI for the full mental model.

Side-by-side matrix

Every cell is sourced from the published manifest, the official repo, or this directory’s own indexed entry. Live counts checked 2026-05-08.

Three takeaways. First, Mermaid is the only one that renders inline in Markdown — that’s the killer feature for code-adjacent diagrams; everything else needs a separate editor or export step. Second, drawio has the most enterprise mindshare on this directory by GSC volume, with the canonical drawio-diagrams-enhanced skill cluster pulling 1,000+ monthly impressions. Third, Penpot is in a different category entirely — it’s a UI design tool with components, tokens, and prototyping; comparing it to the other three is like comparing Figma to flowcharts.

drawio — install + recipe

What it does best

drawio-diagrams-enhanced is the highest-trafficked diagram skill on the directory by GSC volume — “drawio skill” alone lands 772 monthly impressions, and the cluster across variants (“drawio skills,” “claude drawio skill,” “claude code drawio skill”) totals over 1,000 monthly impressions. Enterprise-grade output is the headline strength: PMP-style flowcharts, AWS/Azure architecture diagrams, swimlane process maps. It outputs valid drawio.io XML that opens in any drawio editor — the Confluence plugin, the VSCode extension, the standalone web editor at drawio.io. The XML is also git-diffable, which is the entire reason teams pick drawio over screenshots.

Pick this if you...

• Already produce drawio diagrams elsewhere (Confluence plugin, internal wiki, sales collateral) and want the agent to extend that pipeline
• Need precise PMP-style enterprise diagrams with specific shape libraries (AWS icons, Azure icons, BPMN)
• Want output that opens in drawio editors without a conversion step or PNG export
• Care about diagram-as-source — XML you can diff in PRs and regenerate without losing layout context

Recipe: AWS deployment architecture for a 3-tier web app

With drawio-diagrams-enhanced installed in Claude Code and a fresh chat, paste this prompt:

Use drawio-diagrams-enhanced to draw an AWS deployment
architecture for a 3-tier web app: ALB → ECS Fargate
(3 services: api, worker, scheduler) → RDS Postgres +
ElastiCache Redis → S3 static assets. Include security
groups as labeled boxes. Output the .drawio XML.

The skill activates on the “drawio” keyword. The agent generates a valid mxGraphModel XML document with the AWS shape library imported, the three ECS services named in proper hierarchy under the load balancer, RDS and ElastiCache as paired data-tier nodes, and labeled security-group boxes drawn around the relevant clusters. Save the output as arch.drawio and open it in drawio.io — every element is editable, every label is text, every connection is a routed edge you can re-style. The full cookbook for ten more diagram types is at /blog/claude-drawio-skill-guide.

Skip it if...

You want hand-drawn casual diagrams (Excalidraw is built for that), you ship diagrams in Markdown PRs (Mermaid wins inline), or your team has no drawio tooling installed and won’t adopt it. drawio output is overkill for a throwaway whiteboard sketch and underkill for a real UI mockup.

Excalidraw — install + recipe

What it does best

Excalidraw’s signature is the sketchy, hand-drawn aesthetic — diagrams look like whiteboard sketches, not corporate flowcharts. The skill outputs Excalidraw’s JSON format with the right rough-shape parameters (the ones that invoke Rough.js to produce wobbly lines and slightly-off rectangles). Best for early-stage architecture sketches, brainstorming whiteboards, and casual technical communication where “this is rough” is the whole point. The collaborative canvas at excalidraw.com works as the primary editor — paste the JSON, share the link, edit live with teammates.

Pick this if you...

• Are doing early-stage architecture brainstorms where the rough aesthetic carries the “not finalized” signal
• Share diagrams with non-engineers — the casual look invites discussion in a way clean vector diagrams do not
• Want Excalidraw’s collaborative whiteboard mode, not just static output
• Are pairing diagrams with Slack threads or design docs, not building a formal diagram-as-source workflow

Recipe: sketch an OAuth 2.1 PKCE handshake

With excalidraw installed and a chat open in Claude Code:

Use the excalidraw skill to sketch the request flow for a
typical OAuth 2.1 PKCE handshake between an MCP client and
a remote MCP server with an authorization server. Use rough
hand-drawn arrows, casual labels, and the standard
Excalidraw color palette.

The skill activates, the agent emits Excalidraw JSON with three rectangles for the actors (Client, Auth Server, MCP Server), hand-drawn arrows with sequence labels (1. discovery, 2. PKCE start, 3. authorize, 4. callback, 5. exchange, 6. attach token to MCP request), uses the rough-shape parameter for that whiteboard aesthetic, and applies the standard Excalidraw color palette. Paste the JSON into excalidraw.com via “Open file” and you have a shareable canvas you can edit live in a pairing session.

Skip it if...

Stakeholders want polished diagrams (drawio or a real design tool fits better), you’re shipping diagrams in Markdown READMEs (Mermaid wins inline), or the diagram is the contract — a system other tools consume. Excalidraw is for the brainstorm phase; refine it elsewhere when the diagram has to ship.

Mermaid — install + recipe

Mermaidveelenga

1-Click Ready

Render Mermaid diagrams in real-time with live preview, browser refresh, WebSocket updates, and SVG/PNG/PDF export plus

developer toolsdesign1.1k20

What it does best

Mermaid is the only one of the four that lives in Markdown. The triple-backtick mermaid fenced code block renders natively in GitHub READMEs, GitLab, Notion, Obsidian, and most modern Markdown viewers — no editor required, no separate file, no PNG export. Best for code-adjacent diagrams: sequence diagrams in PR descriptions, ER diagrams in database READMEs, flowcharts in design docs. The Mermaid MCP server is server, not skill — it actually validates and renders the syntax, which is useful when the agent’s first attempt has a typo or unbalanced bracket.

Pick this if you...

• Have diagrams that live in Markdown — PR descriptions, README files, internal docs sites that render Markdown
• Want zero-tooling diagrams that render where they’re written, with no editor install required for the reader
• Care about diagram-as-source for git workflows — Mermaid blocks diff cleanly in PRs and version-control well
• Are building documentation that travels with the code (the diagram is checked in alongside the file it describes)

Recipe: sequence diagram for an MCP file-read flow

With the Mermaid MCP server installed and connected:

Use the Mermaid MCP server to draw a sequence diagram for:
User → MCP Client (Claude Code) → MCP Server (filesystem) →
File System → MCP Server → MCP Client → User, for a "read
this file" operation. Validate the syntax before returning.
Embed in a GitHub-flavored Markdown block.

The agent emits a sequenceDiagram in Mermaid syntax, calls the MCP server’s validate tool to confirm the syntax parses, and returns the rendered Markdown block. Paste the block into a GitHub PR description and it renders inline — no upload, no image step. The validate tool is the value-add over copy-pasting from a chat answer; first-attempt Mermaid syntax has a non-zero error rate, and the server catches it before you paste a broken block into a PR.

Skip it if...

You need PMP-style detailed flowcharts — Mermaid’s syntax doesn’t cover every shape, and drawio wins on expressivity. You want the hand-drawn aesthetic (Excalidraw). The diagram is part of a design pipeline that ends in a UI mockup (Penpot or Figma fits better).

Penpot — install + recipe

Penpotmontevive

1-Click Ready

Integrate Penpot with electronic design automation software for browsing, retrieving, and exporting UI designs easily us

ai mldeveloper tools3.2k35

What it does best

Penpot is the open-source Figma alternative — a full design tool with components, design tokens, prototyping, and multi-page projects. The Penpot MCP server lets Claude generate Penpot design files from prompts: UI mockups, design system components, full-screen flow prototypes. It’s open source under MPL-2.0, self-hostable via Docker, and has a free SaaS tier with no seat limits. Best when the diagram is actually a UI design rather than a technical schematic — onboarding flows, dashboards, marketing pages, design-system component libraries.

Pick this if you...

• Are designing UI mockups or prototypes, not architecture or process diagrams
• Want an open-source Figma alternative — same shape of tool, no vendor lock-in
• Need design components and tokens, not just static shapes — Penpot has a real component system
• Want to self-host design infrastructure, or care about Penpot’s emerging open-source ecosystem

Recipe: 3-screen onboarding flow

With the Penpot MCP server connected and a Penpot workspace ready:

Use the Penpot MCP to generate a 3-screen onboarding flow
for a SaaS product:
  (1) signup with email + password,
  (2) 4-step onboarding wizard,
  (3) empty-state dashboard.
Use Penpot's component system with shared button + input
components. Export the .penpot file path.

The agent calls the Penpot MCP’s create_project tool, defines shared components (Button, Input, Card, StepIndicator), composes the three screens reusing those components, and exports the project file. The output is a self-contained .penpot file the design team can open in Penpot directly — they get a real Figma-shaped editing experience, not a static image. The components stay editable, the prototyping links between screens are live, and the design tokens propagate when changed.

Skip it if...

You need architecture or sequence diagrams (drawio, Mermaid, or Excalidraw fit better depending on aesthetic), your team is already on Figma and the switching cost is higher than the benefit, or design tooling isn’t the bottleneck for your workflow. Penpot is for design work, not technical diagramming.

Common pitfalls

Community signal

The diagram-skill space is asymmetric on traffic. drawio is far ahead — “drawio skill” alone is the third-highest-volume skill query in our search-console data. “mermaid mcp” and “penpot mcp” are mid-traffic server queries; “excalidraw skill” is a smaller cluster but consistently trending. Across HN, GitHub, and the broader Claude Code community in early 2026, the consistent message is that picking by output destination beats picking by personal preference. Teams shipping in Confluence write drawio. Teams shipping in GitHub write Mermaid. Teams brainstorming write Excalidraw. Teams designing UIs use Penpot or Figma. Match the tool to the consumer of the diagram, not the producer.

Worth noting: the four don’t compose well in a single prompt. If you ask the model to “draw a sequence diagram in Mermaid then a UI mockup in Penpot,” activation gets noisy and one usually wins. Better to split into separate sessions or be explicit per tool. The Best Language Skills for Claude Code comparison applies the same lesson in a different domain.

Frequently asked questions

Sources

drawio

• /skills/drawio-diagrams-enhanced — directory page for the canonical drawio skill
• /blog/claude-drawio-skill-guide — cookbook covering 10 specific diagram types
• drawio.com — official editor (formerly diagrams.net)

Excalidraw

• /skills/excalidraw — directory page for the Excalidraw skill
• excalidraw.com — official collaborative canvas
• github.com/excalidraw/excalidraw — Excalidraw monorepo (MIT)

Mermaid

• /servers/mermaid — directory page for the Mermaid MCP server
• mermaid.js.org — official Mermaid syntax reference
• github.com/mermaid-js/mermaid — core library (MIT)

Penpot

• /servers/penpot — directory page for the Penpot MCP server
• penpot.app — official site, free SaaS tier and Docker self-host
• github.com/penpot/penpot — Penpot monorepo (MPL-2.0)

Related comparisons

• /blog/best-language-skills-for-claude-code-2026 — sibling D-1 comparison covering language skills
• /blog/claude-skills-vs-mcp-vs-subagents-vs-cli-2026-decision-matrix — the skill-vs-server distinction in depth
• /blog/datadog-vs-grafana-vs-sentry-mcp-2026 — observability MCP comparison

Internal links

• /skills/drawio-diagrams-enhanced
• /skills/excalidraw
• /servers/mermaid
• /servers/penpot
• /skills — browse all Claude skills
• /servers — browse all 3,000+ MCP servers