Diagram Selection & Patterns

Interactive Diagram Selection

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.

Overview

This skill helps you choose the right diagram type and tool for your visualization needs. Use this when you need to decide:

• Which diagram type best represents your information

• Which tool (Mermaid or PlantUML) to use

• How to structure the diagram for clarity

Diagram Type Decision Tree

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)

Tool Selection Guide

Quick Decision Matrix

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

Detailed Comparison

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

When to Choose Mermaid

• Documentation that lives in GitHub/GitLab repos

• Quick diagrams that need no setup

• Teams with mixed technical backgrounds

• Simple to moderately complex diagrams

When to Choose PlantUML

• Complex enterprise architecture (C4, ArchiMate)

• Maximum control over appearance

• Specialized diagrams (MindMap, JSON, WBS)

• Need for sprites/icons

Quick Reference: Choosing Diagram Type

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

References

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

Delegation

For detailed syntax reference:

• Mermaid syntax: Invoke visualization:mermaid-syntax skill

• PlantUML syntax: Invoke visualization:plantuml-syntax skill

Test Scenarios

Scenario 1: Choosing a diagram type

Query: "What diagram should I use to show API request flow?"

Expected: Skill activates, recommends sequence diagram, provides tool comparison

Scenario 2: Tool selection

Query: "Should I use Mermaid or PlantUML for C4 diagrams?"

Expected: Skill activates, recommends PlantUML for complex C4, Mermaid for simple context

Scenario 3: Pattern lookup

Query: "Show me an authentication sequence diagram pattern"

Expected: Skill activates, directs to sequence-class-patterns.md reference

Last Updated: 2025-12-28

Version History

• v1.1.0 (2025-12-28): Refactored to progressive disclosure - extracted patterns to references/

• v1.0.0 (2025-12-26): Initial release