Agent skill · design visual · claude-office-skills
diagram-creator
Create professional diagrams using Mermaid, PlantUML, and other text-based diagram tools. Generate flowcharts, sequence diagrams, architecture diagrams, and more.
Why this skill is useful
Provides specific commands and patterns for generating various types of diagrams using Mermaid and PlantUML that the AI wouldn't reliably generate on its own.
What it needs
About 4k tokens when loaded. Last updated 2026-01-31. 363 stars on the source repository.
What this skill does
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 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 --- 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 --- Output Format mermaid [Mermaid code here] plantuml [PlantUML code here] %%{init: {'theme':'forest'}}%% --- PlantUML Examples Sequence Diagram Component Diagram --- Tips for Better Diagrams 1. Keep it simple - Don't overcrowd 2. Use consistent naming - Clear, descriptive labels 3. Group related items - Use subgraphs/packages 4. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills claude-office-skills/diagram-creator