From visualization
Guides selection of diagram types (sequence, C4, ER, flowchart, etc.) and tools (Mermaid vs PlantUML) based on purpose like architecture, workflows, data. Use for visualization decisions.
npx claudepluginhub melodic-software/claude-code-plugins --plugin visualizationThis skill is limited to using the following tools:
Use AskUserQuestion to understand requirements and recommend the optimal diagram type and tool:
Guides creation of syntactically valid Mermaid diagrams for PRDs, specs, roadmaps, and presentations by selecting from 15 types, following syntax rules, and validating. Includes PM examples and selection guide.
Generates Mermaid diagrams in markdown for flowcharts, sequence diagrams, ER diagrams, class diagrams, state machines, Gantt charts, git graphs, and more. Useful for visualizing code structures, systems, processes, database schemas, workflows, and API flows.
Generates Mermaid or PlantUML diagrams from natural language, supporting sequence, class, ER, flowchart, C4, and git graphs for visualizing flows, schemas, and architectures.
Share bugs, ideas, or general feedback.
Use AskUserQuestion to understand requirements and recommend the optimal diagram type and tool:
# Question 1: Primary Purpose (MCP: CLI best practices - scope selection)
question: "What are you trying to visualize?"
header: "Purpose"
options:
- label: "System Architecture (Recommended)"
description: "Components, services, containers, deployment"
- label: "Process/Workflow"
description: "Steps, decisions, activities, state transitions"
- label: "Data Structures"
description: "Classes, entities, relationships, schemas"
- label: "Interactions"
description: "Sequence of calls, messages, API flows"
# Question 2: Tool Constraints (MCP: CLI best practices - output format)
question: "Do you have tool or platform constraints?"
header: "Tool"
options:
- label: "GitHub/GitLab Markdown (Recommended)"
description: "Use Mermaid - native rendering, no setup"
- label: "Maximum Customization"
description: "Use PlantUML - more styling, sprites, icons"
- label: "Enterprise Architecture"
description: "Use PlantUML - C4, ArchiMate support"
- label: "No Preference"
description: "I'll recommend based on diagram type"
Use these responses to apply the decision tree and recommend the appropriate diagram type and tool.
This skill helps you choose the right diagram type and tool for your visualization needs. Use this when you need to decide:
START
|
+-- Interactions over time? --> SEQUENCE DIAGRAM
|
+-- Object/class structure? --> CLASS DIAGRAM
|
+-- Database schema? --> ER DIAGRAM
|
+-- State transitions? --> STATE DIAGRAM
|
+-- Process/workflow? --> FLOWCHART or ACTIVITY DIAGRAM
|
+-- System architecture?
| |
| +-- High-level context? --> C4 CONTEXT
| +-- Containers/services? --> C4 CONTAINER or COMPONENT
| +-- Infrastructure? --> DEPLOYMENT DIAGRAM
|
+-- Project timeline? --> GANTT CHART
|
+-- Git branching? --> GIT GRAPH (Mermaid only)
|
+-- Hierarchical ideas? --> MINDMAP (PlantUML only)
|
+-- Data structure? --> JSON DIAGRAM (PlantUML only)
| Need | Recommended Tool | Reason |
|---|---|---|
| GitHub/GitLab rendering | Mermaid | Native support |
| Complex C4 models | PlantUML | Mature, better rendering |
| Simple sequence/class | Mermaid | Simpler syntax |
| MindMaps | PlantUML | Only option |
| JSON visualization | PlantUML | Only option |
| GitGraph | Mermaid | Only option |
| ER diagrams | Mermaid | Better default rendering |
| State diagrams | Mermaid | Cleaner output |
| Maximum customization | PlantUML | More styling options |
| Zero setup | Mermaid | Browser-based |
| Enterprise architecture | PlantUML | Better ArchiMate, C4 |
| Feature | Mermaid | PlantUML |
|---|---|---|
| Setup | None (browser) | Java + GraphViz |
| Markdown integration | Native (GitHub, GitLab) | Requires image embedding |
| Learning curve | Gentle | Steeper |
| Customization | Limited | Extensive |
| C4 support | Experimental | Mature |
| Diagram types | ~10 | 15+ |
| JSON/MindMap | No | Yes |
| GitGraph | Yes | No |
| Question | If Yes, Use |
|---|---|
| Showing message flow between systems? | Sequence |
| Modeling OOP classes and relationships? | Class |
| Documenting database tables? | ER |
| Showing valid state transitions? | State |
| Depicting a process or algorithm? | Flowchart |
| High-level system overview? | C4 Context |
| Service/container architecture? | C4 Container |
| Timeline or schedule? | Gantt |
| Git branching strategy? | Git Graph |
| Brainstorming hierarchy? | MindMap |
For detailed patterns and examples, see:
| Reference | Content | When to Load |
|---|---|---|
| sequence-class-patterns.md | API flows, auth, async, domain models, repositories | Creating sequence/class diagrams |
| er-state-flow-patterns.md | Blog/e-commerce schemas, order lifecycle, decision trees | Creating ER/state/flow diagrams |
| c4-patterns.md | C4 context/container, tool recommendations | Creating architecture diagrams |
| best-practices.md | General guidelines, diagram tips, anti-patterns | Improving diagram quality |
For detailed syntax reference:
visualization:mermaid-syntax skillvisualization:plantuml-syntax skillQuery: "What diagram should I use to show API request flow?"
Expected: Skill activates, recommends sequence diagram, provides tool comparison
Query: "Should I use Mermaid or PlantUML for C4 diagrams?"
Expected: Skill activates, recommends PlantUML for complex C4, Mermaid for simple context
Query: "Show me an authentication sequence diagram pattern"
Expected: Skill activates, directs to sequence-class-patterns.md reference
Last Updated: 2025-12-28