Decision guidance for selecting the right diagram type and tool. Provides patterns for common visualization scenarios, tool comparison, and best practices.
Provides decision guidance for selecting the right diagram type and tool. Activates when choosing between Mermaid/PlantUML or deciding which diagram (sequence, class, C4, etc.) best represents your information.
/plugin marketplace add melodic-software/claude-code-plugins/plugin install milan-jovanovic@melodic-softwareThis skill is limited to using the following tools:
references/best-practices.mdreferences/c4-patterns.mdreferences/er-state-flow-patterns.mdreferences/sequence-class-patterns.mdThis 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
Use when working with Payload CMS projects (payload.config.ts, collections, fields, hooks, access control, Payload API). Use when debugging validation errors, security issues, relationship queries, transactions, or hook behavior.
Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.