Design Doc Mermaid

Create Mermaid diagrams (flowchart, sequence, class, ER, state, C4, architecture) from text or source code. Default for GitHub wiki. Use when asked to create a diagram, generate mermaid, document architecture, or convert code to diagram. PlantUML is only for leftover types. Confluence needs PNG/SVG as well as the fence.

179 stars 24 forksSoftware Development

Install

skills CLI (Claude Code, Cursor, Codex and more)
npx skills add SpillwaveSolutions/design-doc-mermaid --skill design-doc-mermaid
Manual install
git clone --depth 1 https://github.com/SpillwaveSolutions/design-doc-mermaid.git /tmp/design-doc-mermaid
mkdir -p ~/.claude/skills
cp -r /tmp/design-doc-mermaid/. ~/.claude/skills/design-doc-mermaid

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# Mermaid Architect - Hierarchical Diagram and Documentation Skill

Mermaid diagram and documentation system with specialized guides and code-to-diagram capabilities.

## Table of Contents

- [Decision Tree](#decision-tree)
- [GitHub wiki, WikiTicket, and Confluence](#github-wiki-wikiticket-and-confluence)
- [Available Guides and Resources](#available-guides-and-resources)
- [Usage Patterns](#usage-patterns)
- [Resilient Workflow](#resilient-workflow)
- [Unicode Semantic Symbols](#unicode-semantic-symbols)
- [Python Utilities](#python-utilities)
- [Decision Tree Examples](#decision-tree-examples)
- [High-Contrast Styling](#high-contrast-styling)
- [File Organization](#file-organization)
- [Workflow Summary](#workflow-summary)
- [When to Use What](#when-to-use-what)
- [Best Practices](#best-practices)
- [Learning Path](#learning-path)

## Decision Tree

**How this skill works:**

1. **User makes a request** → Skill analyzes intent
2. **Skill determines diagram/document type** → Loads appropriate guide(s)
3. **AI reads specialized guide** → Generates diagram/document using templates
4. **Result delivered** → With validation and export options

**User Intent Analysis:**
Read the full skill on GitHub

Details

Skill name
design-doc-mermaid
Repository
SpillwaveSolutions/design-doc-mermaid
Repo updated
24 August 2026

FAQ

What does the Design Doc Mermaid skill do?

Create Mermaid diagrams (flowchart, sequence, class, ER, state, C4, architecture) from text or source code. Default for GitHub wiki. Use when asked to create a diagram, generate mermaid, document architecture, or convert code to diagram. PlantUML is only for leftover types. Confluence needs PNG/SVG as well as the fence.

How do I install the Design Doc Mermaid skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add SpillwaveSolutions/design-doc-mermaid --skill design-doc-mermaid. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Design Doc Mermaid popular?

It lives in SpillwaveSolutions/design-doc-mermaid, which has 179 GitHub stars and 24 forks.

Related skills

Software Certificate Skill

173

IvanCodesDev/software-certificate-skill

面向普通用户，从真实软件项目全自动生成中国软件著作权申请资料：一次收集登记事实，自动分析业务、选择可追溯源码、取得真实界面证据，生成申请表信息、规范黑白灰操作手册、代码前后30页或全部材料及真实 DOCX/PDF；内部验证、渲染、哈希与备份只进入系统临时运行区，项目最终仅保留正式资料。适配 Codex、Claude Code、Cursor、OpenCode、WorkBuddy、QoderWork、TraeWork 及支持 Agent Skills 或 AGENTS.md 的平台。用户提到软件著作权、软著申请资料、申请表、代码材料、操作手册或软著审查时使用。

Software Development12

Superior Trade Auth

218

Superior-Trade/superior-skills

Use when an agent needs to register a Superior Trade account, verify an email OTP, configure x-api-key authentication, or recover from missing or invalid credentials before using the Unified API.

Software Development

Bulletproof

152

artemiimillier/bulletproof

Use when building a feature, refactoring, fixing a complex bug, changing architecture, or starting any non-trivial coding task. 12-stage verified dev workflow from research to deploy.

Software Development28

Tlgr

199

tlgrcli/tlgr

Read and act on a personal Telegram account from the terminal with the tlgr CLI (MTProto user account, not a bot). Use when the user wants to check unread Telegram chats, read or search message history, send, reply to, edit, forward or schedule messages, manage chats, groups, channels, contacts, folders, reactions, polls, media or stories, or receive Telegram events through a webhook. Every command answers in JSON with stable exit codes.

Software DevelopmentIn 1 list

Spec Driven Development

156

FredAntB/Spec-Driven-Development

Use this skill to scaffold Spec Driven Development: requirements.md, design.md, tasks.md, and cross-compatible AI config files (CLAUDE.md, .cursorrules, .windsurfrules, .github/copilot-instructions.md). Triggers: 'requirements', 'spec', 'design doc', 'tasks', 'CLAUDE.md', 'cursorrules', 'SDD', 'spec driven', 'AI configuration', 'cross-AI', 'multi-agent', 'agent setup'. Also trigger for: 'set up my AI tools', 'keep agents consistent', 'stop AI going off-script', 'plan before coding', 'structure project for AI'. Retrofit triggers: 'document my system', 'document my codebase', 'describe my archit

Software Development18

Review Forge

224

vikingmute/review-forge

Use when orchestrating a code review workflow across multiple LLMs or agents, synthesizing review findings, producing checklist-driven fix scopes, applying selected fixes, running regression tests, independently verifying fixes, updating review status, or keeping code review process artifacts isolated under code_review/.

Software Development11

Browse the most popular Claude skills, all software development skills, or write your own with the skills generator.