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.

View SKILL.md on GitHub Repository
Stars 9
Forks 1

Install this agent skill to your Project

npx add-skill https://github.com/joaquimscosta/arkhe-claude-plugins/tree/main/plugins/doc/skills/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

  1. Determine format: Mermaid (default) or ASCII (if user explicitly requests)
  2. Select diagram type based on what's being visualized
  3. Choose layout: TB/TD (top-down), LR (left-right) for Mermaid
  4. Keep readable: Max 15-20 nodes per diagram
  5. Apply meaningful styling: Colors/shapes with semantic meaning

Output Format

Mermaid (Default)

markdown
```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 /diagram command
  • With docs: Works alongside doc-coauthoring skill for documentation diagrams

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

joaquimscosta/arkhe-claude-plugins

Skill Name

What this skill does. Use when user mentions "keyword1", "keyword2", or "keyword3". Keep under 1,024 characters and include specific trigger keywords.

9 1
Explore
joaquimscosta/arkhe-claude-plugins

plugin-release-checker

9 1
Explore
joaquimscosta/arkhe-claude-plugins

skill-validator

Validate skills against Anthropic best practices for frontmatter, structure, content, file organization, hooks, MCP, and security (62 rules in 8 categories). Use when creating new skills, updating existing skills, before publishing skills, reviewing skill quality, or when user mentions "validate skill", "check skill", "skill best practices", "skill review", or "lint skill".

9 1
Explore
joaquimscosta/arkhe-claude-plugins

sync-docs

Sync official Anthropic documentation and analyze impact on project components. Runs docs/reference/update-claude-docs.sh, computes diffs, and reports impacts on the skill validator, plugins, and project documentation. Use when user mentions "sync docs", "update reference docs", "refresh docs", or "check doc changes".

9 1
Explore
joaquimscosta/arkhe-claude-plugins

research-frontmatter

Enforce standard YAML frontmatter on research documents in docs/research/. Use when creating, editing, or promoting research files, when user mentions "research metadata", "research frontmatter", or "research staleness".

9 1
Explore
joaquimscosta/arkhe-claude-plugins

deep-research

Deep research on technical topics using EXA tools with intelligent two-tier caching. Use when user asks to research a topic, investigate best practices, look up information, find patterns, or explore architectures. Also invoked by /research command. Triggers: "research", "look up", "investigate", "deep dive", "find information about", "what are best practices for", "how do others implement".

9 1
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results