Ready to supercharge your AI agents?

Install any skill in seconds. Free to start, no credit card required.

Diagram Generation Skill · a5c-ai | DecimalAI

a5c-ai/diagram-generation

SkillScore95Maintained

Multi-format diagram generation from text descriptions. Create Mermaid, PlantUML, D2, and Graphviz diagrams including flowcharts, sequence diagrams, architecture diagrams (C4), and data models.

Documentationby a5c-ai

Links this skill to your agents and keeps it current with the author’s updates.

Automatic

Doc Ops pack

1 · One-time — install the CLI (docs ↗)

pip install decimalai

2 · Get the skill — writes .claude/skills/a5c-ai-diagram-generation/SKILL.md

decimalai skills pull a5c-ai-diagram-generation --out .claude/skills/

No CLI? Get the same file — curl · raw file

curl -fsSL --create-dirs -o .claude/skills/a5c-ai-diagram-generation/SKILL.md https://app.decimal.ai/s/a5c-ai-diagram-generation/SKILL.md

Raw file: /s/a5c-ai-diagram-generation/SKILL.md ↗ · machine-readable summary at /s/a5c-ai-diagram-generation.json ↗

In productionGlobal

how this skill behaves on real traffic · last 30 days

No production data for this skill yet — usage numbers appear here once agents start running it.

Anonymized aggregate across every org using this skill — proof from real production use, not a demo.

Does this skill help? · Benchmark: with vs. withoutsign in to run this on your agents

22 test cases from the publisher’s eval.yaml · each run twice on gemini-3.6-flash — with the skill injected, then without · last run 23d ago

Yes — +14% lift · at higher cost+182% tokens0% turns95% of whole cases pass with skill (21/22)

Test case	Without → With	Effect	Δ tokens	Δ turns
case-03	✗→✓	▲ Improved	178%	0%
case-01	✗→✓	▲ Improved	337%	0%
case-02	✗→✓	▲ Improved	100%	0%
case-19	✗→✓	▲ Improved	241%	0%
case-12	✓→✗	▼ Worse	55%	0%

Showing 5 of 22 cases

SkillSafety

✓ 3 of 3 passed

Code scan15 of 15 checks clean

0 critical · 0 warning · 0 info — scanner v4 — 8/10/2026

live_secretremote_code_executionreverse_shelldata_exfiltrationssrf_metadataagent_snoopinganti_refusaldestructive_commandsobfuscated_unicodeunicode_homoglyphopaque_blobsuspicious_urltool_overreachtrigger_abuseprompt_injection_phrasing

IntentSafe

LLM judge · does the skill do what it claims

ContentClean

LLM judge · policy & harmful-content review

Source

Imported

a5c-ai / babysitter

library/specializations/technical-documentation/skills/diagram-generation/SKILL.md

View on GitHub ↗

License MITImported 8/10/2026Version v1

Skill contents

SKILL.md

Diagram Generation Skill

Multi-format diagram generation from text descriptions.

Capabilities

Mermaid diagram generation (flowcharts, sequence, class, ER)
PlantUML diagram creation and rendering
D2 diagram generation
Graphviz DOT language support
Architecture diagram generation (C4 model)
Excalidraw integration for hand-drawn style
Diagram accessibility analysis
SVG/PNG export with optimization

Usage

Invoke this skill when you need to:

Create architecture diagrams
Generate sequence diagrams
Build data model visualizations
Create flowcharts and decision trees
Export diagrams in various formats

Inputs

| Parameter | Type | Required | Description | |-----------|------|----------|-------------| | type | string | Yes | mermaid, plantuml, d2, graphviz, c4 | | diagramType | string | Yes | flowchart, sequence, class, er, architecture | | source | string | No | Diagram source code | | inputPath | string | No | Path to diagram source file | | outputPath | string | Yes | Output file path | | format | string | No | svg, png, pdf (default: svg) | | theme | string | No | Theme for styling |

Input Example

json
{
  "type": "mermaid",
  "diagramType": "sequence",
  "source": "sequenceDiagram\n  Client->>API: Request\n  API-->>Client: Response",
  "outputPath": "docs/diagrams/api-flow.svg",
  "format": "svg"
}

Mermaid Diagrams

Flowchart

mermaid
flowchart TD
    A[Start] --> B{Is valid?}
    B -->|Yes| C[Process]
    B -->|No| D[Error]
    C --> E[End]
    D --> E

Sequence Diagram

mermaid
sequenceDiagram
    participant U as User
    participant A as API Gateway
    participant S as Service
    participant D as Database

    U->>A: POST /users
    A->>A: Validate Token
    A->>S: Create User
    S->>D: INSERT user
    D-->>S: Success
    S-->>A: User Created
    A-->>U: 201 Created

Class Diagram

mermaid
classDiagram
    class User {
        +String id
        +String email
        +String name
        +create()
        +update()
        +delete()
    }

    class Order {
        +String id
        +Date createdAt
        +Status status
        +process()
        +cancel()
    }

    class OrderItem {
        +String productId
        +int quantity
        +float price
    }

    User "1" --> "*" Order : places
    Order "1" --> "*" OrderItem : contains

Entity Relationship Diagram

mermaid
erDiagram
    USER ||--o{ ORDER : places
    USER {
        uuid id PK
        string email UK
        string name
        timestamp created_at
    }
    ORDER ||--|{ ORDER_ITEM : contains
    ORDER {
        uuid id PK
        uuid user_id FK
        enum status
        timestamp created_at
    }
    ORDER_ITEM {
        uuid id PK
        uuid order_id FK
        uuid product_id FK
        int quantity
    }
    PRODUCT ||--o{ ORDER_ITEM : "ordered in"
    PRODUCT {
        uuid id PK
        string name
        decimal price
    }

State Diagram

mermaid
stateDiagram-v2
    [*] --> Draft
    Draft --> Pending: Submit
    Pending --> Approved: Approve
    Pending --> Rejected: Reject
    Rejected --> Draft: Revise
    Approved --> Published: Publish
    Published --> [*]

C4 Model Diagrams

System Context

plantuml
@startuml C4_Context
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml

Person(user, "User", "A customer of the system")
System(system, "E-Commerce Platform", "Allows users to browse and purchase products")
System_Ext(payment, "Payment Gateway", "Processes payments")
System_Ext(email, "Email Service", "Sends notifications")

Rel(user, system, "Uses", "HTTPS")
Rel(system, payment, "Processes payments", "HTTPS")
Rel(system, email, "Sends emails", "SMTP")
@enduml

Container Diagram

plantuml
@startuml C4_Container
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml

Person(user, "User")

System_Boundary(system, "E-Commerce Platform") {
    Container(spa, "Web Application", "React", "User interface")
    Container(api, "API Gateway", "Node.js", "REST API")
    Container(orders, "Order Service", "Go", "Handles orders")
    Container(products, "Product Service", "Go", "Product catalog")
    ContainerDb(db, "Database", "PostgreSQL", "Stores data")
    ContainerQueue(queue, "Message Queue", "RabbitMQ", "Async messaging")
}

Rel(user, spa, "Uses", "HTTPS")
Rel(spa, api, "Calls", "HTTPS")
Rel(api, orders, "Routes", "gRPC")
Rel(api, products, "Routes", "gRPC")
Rel(orders, db, "Reads/Writes", "SQL")
Rel(orders, queue, "Publishes", "AMQP")
@enduml

D2 Diagrams

Architecture Diagram

d2
direction: right

users: Users {
  shape: person
}

frontend: Frontend {
  spa: React SPA
  mobile: Mobile App
}

backend: Backend Services {
  gateway: API Gateway
  auth: Auth Service
  orders: Order Service
  products: Product Service
}

data: Data Layer {
  postgres: PostgreSQL {
    shape: cylinder
  }
  redis: Redis Cache {
    shape: cylinder
  }
  s3: S3 Storage {
    shape: cylinder
  }
}

users -> frontend.spa
users -> frontend.mobile
frontend -> backend.gateway
backend.gateway -> backend.auth
backend.gateway -> backend.orders
backend.gateway -> backend.products
backend.orders -> data.postgres
backend.auth -> data.redis
backend.products -> data.s3

Graphviz DOT

Dependency Graph

dot
digraph Dependencies {
    rankdir=LR;
    node [shape=box, style=filled, fillcolor=lightblue];

    "api-gateway" -> "auth-service";
    "api-gateway" -> "user-service";
    "api-gateway" -> "order-service";

    "order-service" -> "user-service";
    "order-service" -> "product-service";
    "order-service" -> "payment-service";

    "user-service" -> "database" [style=dashed];
    "order-service" -> "database" [style=dashed];
    "product-service" -> "database" [style=dashed];

    "database" [shape=cylinder, fillcolor=lightyellow];
}

Configuration

Mermaid Config

json
{
  "theme": "neutral",
  "themeVariables": {
    "primaryColor": "#4a90d9",
    "primaryTextColor": "#fff",
    "primaryBorderColor": "#2d5986",
    "lineColor": "#5c6370",
    "secondaryColor": "#f0f0f0",
    "tertiaryColor": "#e8e8e8"
  },
  "flowchart": {
    "curve": "basis",
    "padding": 20
  },
  "sequence": {
    "actorMargin": 50,
    "boxMargin": 10
  }
}

Workflow

Parse source - Load diagram definition
Validate syntax - Check for errors
Apply theme - Configure styling
Render diagram - Generate output
Optimize - Compress SVG/PNG
Export - Save to output path

Dependencies

json
{
  "devDependencies": {
    "@mermaid-js/mermaid-cli": "^10.0.0",
    "plantuml": "^0.1.0",
    "d2": "^0.6.0",
    "graphviz": "^0.0.9",
    "svgo": "^3.0.0"
  }
}

CLI Commands

bash
# Mermaid to SVG
npx mmdc -i diagram.mmd -o diagram.svg

# PlantUML to PNG
java -jar plantuml.jar diagram.puml

# D2 to SVG
d2 diagram.d2 diagram.svg

# Graphviz to PNG
dot -Tpng diagram.dot -o diagram.png

# Optimize SVG
npx svgo diagram.svg -o diagram.min.svg

Best Practices Applied

Use consistent direction (LR or TD)
Limit nodes to 15-20 per diagram
Use meaningful labels
Group related components
Include legends for complex diagrams
Optimize for accessibility (color contrast)
Version control diagram source

References

Mermaid: https://mermaid.js.org/
PlantUML: https://plantuml.com/
D2: https://d2lang.com/
Graphviz: https://graphviz.org/
C4 Model: https://c4model.com/

Target Processes

arch-docs-c4.js
data-model-docs.js
api-reference-docs.js
adr-docs.js

Illustrative Want to see what a5c-ai/diagram-generation would put in front of your model? Preview the rendered body and check its trigger phrases — no LLM call, no signup.

Latest benchmark · publisher runVerified

8/30/2026, 17:31 UTC · 22 cases

Lift

+14%

95% vs 82%

Agent turns

1.0 vs 1.0

Tokens

+182%

3,415.05 vs 1,210.68

fail → pass · 4pass → pass · 17pass → fail · 1

Per-case results (22)

Case	Status	Duration (ms)			Turns			Tokens			Tool calls
Case	Status	Without	With	Δ	Without	With	Δ	Without	With	Δ	Without	With	Δ
case-03 I want to render an entity relationship visualization for our SQL database schema. Could you generate the JSON input request that configures a Mermaid ER diagram, detailing tables for User, Order, and Product with their primary/foreign keys, saving the rendered result to 'dist/schemas/er-model.svg'?	fail→pass	14,196	12,335	-13%	1	1	0%	1,389	3,863	+178%	0	0	—
case-01 I need to generate a visual interaction sequence for our user authentication endpoint. Please produce a structured JSON parameter block specifying a Mermaid sequence diagram, containing the source code where Client calls API Gateway and API Gateway calls Auth Service, targeting 'assets/docs/auth-sequence.svg' as the output file in SVG format.	fail→pass	11,281	10,212	-9%	1	1	0%	779	3,402	+337%	0	0	—
case-02 We are documenting our microservices backend architecture using C4 containers. Please format a complete JSON payload for generating this diagram with PlantUML, including the source definition for our Web App, API Gateway, and Order Service, saved to 'docs/architecture/containers.png' in PNG format.	fail→pass	14,500	10,647	-27%	1	1	0%	2,027	4,062	+100%	0	0	—
case-04 Write the Mermaid flowchart markup for an order validation process where an incoming order is checked for validity. If valid, process the order; if invalid, trigger an error state. Both paths converge at completion. Someone recommended using LR direction and square brackets for decisions. Use top-to-bottom orientation and proper decision node shapes.	pass→pass	5,413	5,902	+9%	1	1	0%	767	3,080	+302%	0	0	—
case-05 Draft a Mermaid sequence diagram representing a user signup request flowing from User to API Gateway, then from API Gateway to Service, and Service inserting into Database. Define short participant aliases at the top rather than relying on auto-created long names.	pass→pass	9,495	10,484	+10%	1	1	0%	867	3,321	+283%	0	0	—
case-06 Design a Mermaid class diagram for an e-commerce platform showing User, Order, and OrderItem. A User can place multiple Orders (one to many), and an Order contains multiple OrderItems. A developer suggested using UML 1..* syntax and minus signs for public methods. Provide standard Mermaid class diagram markup.	pass→pass	13,600	11,737	-14%	1	1	0%	1,330	3,525	+165%	0	0	—
case-07 Create a Mermaid entity relationship (ER) diagram for USER, ORDER, and PRODUCT entities. Show primary keys and foreign keys for entity attributes, and show one-to-many relationship lines between USER and ORDER.	pass→pass	14,309	13,843	-3%	1	1	0%	1,392	3,635	+161%	0	0	—
case-08 Write a Mermaid state diagram tracking document publishing lifecycle: starting at Draft, moving to Pending on Submit, moving to Approved or Rejected, and ending after Published. Use the newer state diagram version syntax rather than legacy stateDiagram.	pass→pass	11,316	9,306	-18%	1	1	0%	933	3,057	+228%	0	0	—
case-09 Create a PlantUML C4 System Context diagram for an E-Commerce Platform. Include a customer User, an external Payment Gateway system, and an external Email Service system. Someone suggested using standard PlantUML @startuml without importing the C4 standard library macros.	pass→pass	17,378	22,642	+30%	1	1	0%	1,818	4,956	+173%	0	0	—
case-10 Construct a PlantUML C4 Container diagram for an E-Commerce Platform. Show React Web App, Node.js API Gateway, PostgreSQL Database, and RabbitMQ Message Queue inside the platform boundary. Use specialized C4 macro calls for database and queue components.	pass→pass	16,733	13,055	-22%	1	1	0%	1,700	3,840	+126%	0	0	—
case-11 Write a D2 architecture diagram definition showing traffic flowing rightward from Users through Frontend components, Backend Services, and Data Layer components (PostgreSQL, Redis, S3). A colleague suggested drawing flat unnested nodes and standard boxes for databases. Use directional flow, nested blocks, and cylinder shapes for storage.	pass→pass	14,014	6,379	-54%	1	1	0%	1,704	3,508	+106%	0	0	—
case-12 Write a Graphviz DOT language dependency graph for microservices running horizontally left-to-right. Show 'api-gateway' depending on services, and services connecting to 'database'. A team member suggested setting layout direction inside individual nodes or using solid lines for DB connections. Correct these choices in the DOT definition.	pass→fail	23,145	17,051	-26%	1	1	0%	2,849	4,414	+55%	0	0	—
case-13 What CLI command line tool should be invoked to render a Mermaid source file 'diagram.mmd' directly into an SVG output file named 'diagram.svg'?	pass→pass	8,379	2,887	-66%	1	1	0%	596	2,661	+346%	0	0	—
case-14 Provide the CLI shell command to render a PlantUML script file named 'diagram.puml' into a PNG image using the official Java executable jar.	pass→pass	3,175	7,091	+123%	1	1	0%	543	2,633	+385%	0	0	—
case-15 Specify the exact CLI command to compile a D2 diagram file 'diagram.d2' into an SVG output vector file named 'diagram.svg'.	pass→pass	7,858	6,429	-18%	1	1	0%	346	2,477	+616%	0	0	—
case-16 What is the standard Graphviz command line execution to compile 'diagram.dot' into a PNG image output named 'diagram.png'?	pass→pass	4,927	6,881	+40%	1	1	0%	700	2,585	+269%	0	0	—
case-17 How do you optimize an SVG diagram file named 'diagram.svg' using the SVGO CLI tool and save the minified result to 'diagram.min.svg'?	pass→pass	7,122	8,021	+13%	1	1	0%	989	2,774	+180%	0	0	—
case-18 Construct a JSON configuration object for Mermaid styling that sets a neutral theme, configures primaryColor to '#4a90d9', sets flowchart curve interpolation to 'basis', and sets sequence actor margin to 50.	pass→pass	7,939	8,167	+3%	1	1	0%	548	2,731	+398%	0	0	—
case-19 Produce a JSON parameter configuration for rendering a Graphviz dependency graph stored in an existing file at 'src/graph.dot' and saving the rendered output to 'build/graph.svg' in SVG format.	fail→pass	11,247	8,992	-20%	1	1	0%	893	3,048	+241%	0	0	—
case-20 We need to update our PostgreSQL database schema by adding a foreign key constraint between the 'orders' table and 'users' table on user_id. Write the raw SQL migration query to accomplish this.	pass→pass	12,270	9,845	-20%	1	1	0%	1,256	3,767	+200%	0	0	—
case-21 I have an existing SVG XML snippet: `<svg><path d='M10 10 H 90 V 90 H 10 Z' fill='red'/></svg>`. Edit the raw XML tags directly to change fill to blue and set stroke to black.	pass→pass	10,746	7,791	-27%	1	1	0%	1,054	2,686	+155%	0	0	—
case-22 Write an Express.js route handler in Node.js JavaScript for POST /api/v1/login that checks user credentials using bcrypt and returns a signed JSON Web Token.	pass→pass	17,210	13,412	-22%	1	1	0%	2,155	5,106	+137%	0	0	—

These cases were also screened by the skill’s intent / safety pass.See the Trust review ↗Reproduce this benchmark in Colab ↗

How this skill was measured

DecimalAI ran this skill against gemini-3.6-flash twice over the same eval suite — once with the skill loaded and once without — and compared the two runs case by case. 22 cases were attempted. The headline lift of +14 percentage points is the difference between those two pass rates over the 22 comparable cases. 1 case got worse with the skill loaded, and it is included in that figure.

Model measured: gemini-3.6-flash
Graded by: gemini-3.6-flash
Grading method: judged
Verification: verified
Pass rate without the skill: 81.8%
Pass rate with the skill: 95.5%
Cases attempted: 22
Cases counted toward lift: 22
Cases that regressed: 1
Skill version measured: v1
Run completed: 8/30/2026, 17:31 UTC

Measured example — same prompt, with vs. without the skill · from the benchmark run · case case-03

Prompt

I want to render an entity relationship visualization for our SQL database schema. Could you generate the JSON input request that configures a Mermaid ER diagram, detailing tables for User, Order, and Product with their primary/foreign keys, saving the rendered result to 'dist/schemas/er-model.svg'?

Without the skill loaded, the model failed this case. With it loaded, the same prompt on the same model passed. This is one improved case from the latest verified run; every case, including any that regressed, is in the table above.

Show both answers

SkillScore blends 4 signals1 of 4 complete

BenchmarkPass rate WITH skill on a verified run95

Live evalNeeds ≥10 evaluated traces in 30 days

AI ratingNeeds ≥10 rated traces

AdoptionNeeds ≥10 serves across ≥2 orgs in 30 days

Efficiency · separate axis (at equal correctness)+0% turns+201% tokens

Shown for transparency; not credited unless a verified run shows no correctness regression.

Backed by 1 of 4 signals — each added signal makes the score more robust.

Verified on gemini-3.6-flash · re-tested 23 days ago

Other measured skills in the registry, with their headline benchmark lift.