Agent skill
diagramming
Creates Mermaid and ASCII diagrams for flowcharts, architecture, ERDs, state machines, mindmaps, and more. Use when user mentions diagram, flowchart, mermaid, ASCII diagram, text diagram, terminal diagram, visualize, C4, mindmap, architecture diagram, sequence diagram, ERD, or needs visual documentation.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/diagramming
SKILL.md
Diagram Generator
Expert skill for creating clear, professional diagrams in Mermaid or ASCII format.
Supported Formats
| Format | Best For | Trigger Keywords |
|---|---|---|
| Mermaid | Web docs, GitHub, rich rendering | "diagram", "mermaid", "visualize" |
| ASCII | Terminals, plain text, emails | "ASCII", "text diagram", "terminal" |
Diagram Types
graph/flowchart - Flowcharts and decision trees
sequenceDiagram - API interactions and workflows
classDiagram - Object-oriented structures
stateDiagram-v2 - State machines and transitions
erDiagram - Database relationships
C4Context/C4Container/C4Component - Architecture views (C4 model)
mindmap - Brainstorming and idea organization
block-beta - System block diagrams
gantt - Project timelines
pie - Data distributions
gitGraph - Git branching strategies
journey - User experience flows
quadrantChart - Priority matrices
timeline - Historical events
Quick Start
- Determine format: Mermaid (default) or ASCII (if user explicitly requests)
- Select diagram type based on what's being visualized
- Choose layout: TB/TD (top-down), LR (left-right) for Mermaid
- Keep readable: Max 15-20 nodes per diagram
- Apply meaningful styling: Colors/shapes with semantic meaning
Output Format
Mermaid (Default)
```mermaid
graph TD
A[Start] --> B{Decision}
B -->|Yes| C[Action 1]
B -->|No| D[Action 2]
classDef success fill:#90EE90
class C success
```
ASCII (When Explicitly Requested)
+-------+ +----------+
| Start | --> | Decision |
+-------+ +----+-----+
|
+---------+---------+
| |
v v
+----------+ +----------+
| Action 1 | | Action 2 |
+----------+ +----------+
ASCII Conventions:
+---+for boxes,|for vertical lines,-->or---for connections- Use consistent spacing and alignment
- Label arrows with
[text]above the line when needed
Diagram Type Selection
| Use Case | Recommended Type |
|---|---|
| Process/decision flow | graph (flowchart) |
| API/service interactions | sequenceDiagram |
| System architecture (high-level) | C4Context |
| System architecture (detailed) | C4Container, block-beta |
| Database schema | erDiagram |
| Brainstorming/ideas | mindmap |
| State transitions | stateDiagram-v2 |
| Project timeline | gantt |
| Feature prioritization | quadrantChart |
Resources
- WORKFLOW.md - Detailed creation methodology
- EXAMPLES.md - All diagram types with real-world examples
- TROUBLESHOOTING.md - Common errors and fixes
Integration
- Auto-invokes on trigger keywords (diagram, mermaid, ASCII, visualize, etc.)
- Manual: Use
/diagramcommand - With docs: Works alongside
doc-coauthoringskill for documentation diagrams
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?