diagramGenerate diagrams from descriptions with Mermaid, PlantUML, or ASCII for architecture, flows, sequences, and data models.
Install via ClawdBot CLI:
clawdbot install ivangdavila/diagramDiagrams should clarify, not complicate. Start simple, add detail only when needed. A 5-box flowchart beats a 50-node sprawl.
| Type | Use For | Format |
|------|---------|--------|
| Flowchart | Processes, decisions, workflows | Mermaid flowchart |
| Sequence | API calls, interactions, protocols | Mermaid sequenceDiagram |
| Architecture | System components, infrastructure | Mermaid flowchart or C4 |
| ER/Data model | Database schemas, relationships | Mermaid erDiagram |
| Class | Object structure, inheritance | Mermaid classDiagram |
| State | Lifecycles, status transitions | Mermaid stateDiagram-v2 |
| Timeline | Project phases, history | Mermaid timeline |
| Mindmap | Brainstorming, concept mapping | Mermaid mindmap |
| Method | When |
|--------|------|
| Mermaid code block | User can render (docs, GitHub, Notion) |
| Render to PNG/SVG | User needs image file |
| ASCII inline | Quick sketch in chat |
| HTML + Mermaid.js | Interactive viewing |
# Using mmdc (mermaid-cli)
npx -y @mermaid-js/mermaid-cli mmdc -i diagram.mmd -o diagram.png -b transparent
# Or via browser tool
# Write HTML with Mermaid, screenshot the rendered diagramFlowchart:
flowchart LR
A[Start] --> B{Decision}
B -->|Yes| C[Action]
B -->|No| D[End]Sequence:
sequenceDiagram
User->>API: Request
API->>DB: Query
DB-->>API: Result
API-->>User: ResponseER Diagram:
erDiagram
USER ||--o{ ORDER : places
ORDER ||--|{ ITEM : contains| Request | Interpret As |
|---------|--------------|
| "Draw my API flow" | Sequence diagram: client → API → services |
| "Show the architecture" | Flowchart with subgraphs for components |
| "Database schema" | ER diagram with relationships |
| "How the auth works" | Sequence or flowchart depending on complexity |
| "User journey" | Flowchart with decision points |
Generated Mar 1, 2026
A development team needs to visualize their CI/CD pipeline to identify bottlenecks and improve deployment efficiency. The diagram would map stages from code commit to production deployment, using a Mermaid flowchart with subgraphs for build, test, and deploy phases, adhering to the 10-15 node limit for clarity.
An e-commerce company wants to diagram the sequence of API calls between their frontend, payment gateway, and inventory system during a customer purchase. This helps in debugging transaction failures and optimizing response times, using a Mermaid sequence diagram to show interactions step-by-step.
A hospital aims to design a database schema for managing patient records, appointments, and medical histories. An ER diagram in Mermaid would define entities like Patient, Doctor, and Appointment with relationships, ensuring data integrity and compliance with privacy regulations by keeping the model simple and focused.
A fintech startup needs to illustrate their microservices architecture for handling payments and fraud detection. Using a Mermaid flowchart with C4-style components, they can show how services like payment processing, logging, and alerts interact, highlighting critical paths with minimal color for team onboarding and scalability planning.
An online learning platform wants to brainstorm and map out course modules and prerequisites for a new curriculum. A Mermaid mindmap diagram helps organize topics hierarchically, making it easy for instructors to visualize dependencies and plan content delivery without overwhelming detail.
Offer the Diagram skill as part of a subscription-based platform for developers and teams, providing access to advanced features like automated rendering to PNG/SVG and collaborative diagram editing. Revenue is generated through monthly or annual fees per user, targeting tech companies and freelancers who need regular diagramming tools.
Provide basic diagram generation for free, such as Mermaid code blocks and ASCII sketches, to attract a broad user base. Monetize by offering premium add-ons like custom SVG exports, integration with project management tools, and priority support, appealing to enterprises and power users who require enhanced functionality.
License the Diagram skill to large organizations for internal use, such as in corporate training, system documentation, and process optimization. This model includes dedicated support, custom integrations with existing workflows, and volume discounts, generating revenue through annual contracts tailored to business needs.
💬 Integration Tip
Integrate the Diagram skill into chat platforms or IDEs by allowing users to input natural language descriptions and receive Mermaid code blocks, which can be easily copied and rendered in tools like GitHub or Notion for seamless workflow adoption.
Display and control HTML content on connected Mac, iOS, or Android nodes via a web-based canvas with live reload and remote actions.
生成和编辑各种类型的图表（drawio、mermaid、excalidraw）。支持流程图、时序图、类图、ER图、思维导图、架构图、网络拓扑图等常见图表类型。能够根据自然语言描述创建新图表，也能读取并修改已有的 drawio/mermaid/excalidraw 文件。使用独立的 MCP server (mcp-diagram-generator) 生成图表文件，减少 token 消耗并保证输出一致性。支持自动配置管理，默认输出路径为项目目录下的 diagrams/{format}/，支持自定义路径和自动创建目录。
Create, export, and manage Canva designs via the Connect API. Generate social posts, carousels, and graphics programmatically.
Create software diagrams using Mermaid syntax. Use when users need to create, visualize, or document software through diagrams including class diagrams, sequence diagrams, flowcharts, ERDs, C4 architecture diagrams, state diagrams, git graphs, and other diagram types. Triggers include requests to diagram, visualize, model, map out, or show the flow of a system.
Generate and render diagrams from Mermaid syntax into PNG, SVG, or PDF using customizable themes and various diagram types.
Generate beautiful, hand-drawn Mermaid diagrams with robust syntax (quoted labels, ELK layout). Use this skill when the user asks for "diagram", "flowchart", "sequence diagram", or "visualize this process".