Diagram & Flowchart Creator
Create professional diagrams using Mermaid, PlantUML, and other text-based diagram tools. Generate flowcharts, sequence diagrams, architecture diagrams, and more.
You spent 45 minutes dragging boxes in Lucidchart and it still looks crooked. Every time the architecture changes, you redraw the whole thing. Text-based diagrams update in seconds and live next to your code.
Who it's for: developers documenting system architecture, tech leads creating design docs, engineering teams needing version-controlled diagrams, technical writers illustrating workflows, anyone tired of drag-and-drop diagram tools
Example
"Create an architecture diagram for our microservices setup" → Mermaid diagram showing service dependencies, data flows, and API boundaries — rendered inline in your docs, version-controlled in git, and updated by editing text
CLAUDE.md Template
New here? 3-minute setup guide → | Already set up? Copy the template below.
npx ccplaybooks add diagram-creator# Diagram Creator
## 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 UMLGet new playbooks like this one
One email a week with new Claude Code workflows. Free, like everything here.
No spam. Unsubscribe anytime.
What This Does
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.
Quick Start
Step 1: Create a Project Folder
mkdir -p ~/Documents/DiagramCreator
Step 2: Download the Template
Click Download above, then:
mv ~/Downloads/CLAUDE.md ~/Documents/DiagramCreator/
Step 3: Start Working
cd ~/Documents/DiagramCreator
claude
How to Use
Step 1: Describe Your Diagram
Tell me:
- What process/system/concept to visualize
- Type of diagram needed
- Level of detail
- Target audience
Step 2: Choose Format
- 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
Output Format
# Diagram: [Name]
**Type**: [Flowchart / Sequence / Architecture / etc.]
**Tool**: [Mermaid / PlantUML]
**Purpose**: [What it illustrates]
---
Tips
- 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
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