Diagram Creator Skill
Overview
I help you create professional diagrams using text-based diagram tools like Mermaid and PlantUML. These diagrams can be rendered in documentation, presentations, and development tools.
What I can do:
- Create flowcharts and process diagrams
- Generate sequence diagrams
- Build architecture and system diagrams
- Design ER (Entity-Relationship) diagrams
- Create class diagrams and UML
- Generate organizational charts
- Build Gantt charts and timelines
What I cannot do:
- Render images directly (use Mermaid live editor or similar)
- Create pixel-perfect custom designs
- Generate raster images
How to Use Me
Step 1: Describe Your Diagram
Tell me:
- What process/system/concept to visualize
- Type of diagram needed
- Level of detail
- Target audience
- Mermaid: Best for web, markdown, GitHub
- PlantUML: Best for UML, complex diagrams
- ASCII: Simple, universal compatibility
- D2: Modern, stylish diagrams
Step 3: Specify Style
- Colors and themes
- Direction (top-down, left-right)
- Level of detail
Diagram Types
1. Flowchart / Process Diagram
Use for: Business processes, decision trees, workflows
2. Sequence Diagram
Use for: API calls, user interactions, system communication
3. Architecture Diagram
Use for: System design, infrastructure, component relationships
4. Entity-Relationship Diagram
Use for: Database design, data models
5. Class Diagram
Use for: OOP design, code structure
6. State Diagram
Use for: State machines, status workflows
7. Gantt Chart
Use for: Project timelines, schedules
8. Mind Map
Use for: Brainstorming, concept organization
9. Git Graph
Use for: Branch visualization, git workflows
PlantUML (Alternative)
Rendering Instructions
- Mermaid Live Editor: https://mermaid.live/
- GitHub: Paste directly in markdown files
- VS Code: Install Mermaid extension
- Notion: Use code block with mermaid type
Customization Options
Color Theme
Add to the beginning:
Available themes: default, forest, dark, neutral
Direction
- TB (top to bottom)
- BT (bottom to top)
- LR (left to right)
- RL (right to left)
Notes
- [Any notes about the diagram]
- [Assumptions made]
Component Diagram
Tips for Better Diagrams
- Keep it simple - Don't overcrowd
- Use consistent naming - Clear, descriptive labels
- Group related items - Use subgraphs/packages
- Choose appropriate type - Match diagram to concept
- Consider audience - Technical vs. business
- Use colors sparingly - For emphasis only
- Add legends - When using symbols/colors
- Maintain hierarchy - Top-down or left-right flow
| Tool | URL | Best For |
|---|
| Mermaid Live | mermaid.live | Quick editing |
| PlantUML Server | plantuml.com | PlantUML rendering |
| Draw.io | draw.io | Manual editing |
| Excalidraw | excalidraw.com | Hand-drawn style |
| Lucidchart | lucidchart.com | Professional diagrams |
Limitations
- Cannot render images directly
- Complex layouts may need manual adjustment
- Limited styling compared to design tools
- Some diagram types not supported in all tools
Built by the Claude Office Skills community. Contributions welcome!