Skip to main content
affpapa.org
RU EN
skill Claude Code CX Codex Cursor GitHub Copilot

design-doc-mermaid — Claude Code skill: what it does, how to install

Generates Mermaid diagrams and design documents from code or user prompts. Useful for GitHub wiki pages, architecture reviews, and sequence flows.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add SpillwaveSolutions/design-doc-mermaid --skill design-doc-mermaid -a claude-code
Open on GitHub

What design-doc-mermaid does

The skill uses an internal decision tree to route requests to specialized guides. It selects reference materials for deployment topologies, API sequence flows, activity workflows, or class and ER models. Ready-made Markdown templates cover full architecture, API specifications, and database schema design.

Code analysis examples cover setups like Spring Boot, FastAPI, React, Node.js, and Python ETL pipelines. Auxiliary Python utilities extract_mermaid.py and mermaid_to_image.py handle extraction, while mmdc runs diagram syntax validation.

When GitHub cannot render experimental C4 or architecture-beta blocks, the workflow falls back directly to flowchart TD. For Confluence documentation, a text fence alone will not suffice, as PNG or SVG exports are also required.

What it helps with

  • extract sequence diagrams directly from API controller code
  • draft architecture design documents with database entity schemas
  • create deployment and infrastructure topologies for GitHub wiki
  • export Mermaid diagrams to PNG or SVG for Confluence pages

Example prompts for the agent

  • Generate a sequence diagram showing the authentication flow from this FastAPI service
  • Create an architecture design document with a database schema for our order system
  • Build a deployment diagram for our cloud infrastructure

How to install design-doc-mermaid

1Skills CLI (Vercel)

npx skills add SpillwaveSolutions/design-doc-mermaid --skill design-doc-mermaid -a claude-code

2Manually: put the files in place

~/.claude/skills/design-doc-mermaid/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/design-doc-mermaid/

Similar

cmux-localization manaflow-ai A skill for managing translations of user-facing strings in your interface. Runs an audit whenever you change button text, menus, tooltips, or error messages. Claude Code CX Codex Cursor +1 4,700installs docx nexu-io Create, edit, and analyze Word documents with tracked changes, comments, and formatting. Use it for design briefs, copy docs, and materials ready for review. Claude Code CX Codex Cursor +1 3,000installs copywriting nexu-io Writes and rewrites marketing copy for landing pages, homepages, and advertisements. Acts as a copy chief partner during product launches. Claude Code CX Codex Cursor +1 3,000installs context-driven-development Seth Hobson This skill keeps project context in conductor/, creates and checks its documents, and syncs them as work changes. Use it for setup or codebase onboarding. Claude Code CX Codex Cursor 11,099installs incident-runbook-templates Seth Hobson This skill builds step-by-step incident runbooks for detection, triage, mitigation, recovery, escalation, and status updates. Claude Code CX Codex Cursor 10,900installs karpathy-llm-wiki Astro-Han Manages a personal Markdown knowledge base inspired by Andrej Karpathy: stores raw sources immutably and compiles them into verified wiki articles. Claude Code CX Codex Cursor +1 8,100installs grill-with-docs Matt Pocock This skill interviews you about a plan or design and creates ADRs and a glossary along the way. Use it when decisions need sharper definition. Claude Code 1,219,756installs skill-creator official anthropics Creates and refines skills, then tests them with prompts, evaluations, and performance checks. Claude Code Claude.ai 414,180installs

Questions about design-doc-mermaid

How to install design-doc-mermaid in Claude Code?

Run npx skills add SpillwaveSolutions/design-doc-mermaid --skill design-doc-mermaid -a claude-code. Alternatively, place the file in ~/.claude/skills/design-doc-mermaid/SKILL.md.

What does the design-doc-mermaid skill do?

It turns code and prompts into Mermaid diagrams, including sequence, ER, class, and deployment charts. It also prepares structured software design documents and templates.

How does it handle diagrams for Confluence and GitHub?

For GitHub rendering failures on C4 blocks, it falls back to flowchart TD. For Confluence, it generates PNG or SVG images alongside the code fence.

See also

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor