Multi-format diagram generation from text descriptions. Create Mermaid, PlantUML, D2, and Graphviz diagrams including flowcharts, sequence diagrams, architecture diagrams (C4), and data models.
Generates diagrams from text descriptions in multiple formats including Mermaid, PlantUML, D2, and Graphviz.
npx claudepluginhub a5c-ai/babysitterThis skill is limited to using the following tools:
README.mdMulti-format diagram generation from text descriptions.
Invoke this skill when you need to:
| 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 |
{
"type": "mermaid",
"diagramType": "sequence",
"source": "sequenceDiagram\n Client->>API: Request\n API-->>Client: Response",
"outputPath": "docs/diagrams/api-flow.svg",
"format": "svg"
}
flowchart TD
A[Start] --> B{Is valid?}
B -->|Yes| C[Process]
B -->|No| D[Error]
C --> E[End]
D --> E
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
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
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
}
stateDiagram-v2
[*] --> Draft
Draft --> Pending: Submit
Pending --> Approved: Approve
Pending --> Rejected: Reject
Rejected --> Draft: Revise
Approved --> Published: Publish
Published --> [*]
@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
@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
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
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];
}
{
"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
}
}
{
"devDependencies": {
"@mermaid-js/mermaid-cli": "^10.0.0",
"plantuml": "^0.1.0",
"d2": "^0.6.0",
"graphviz": "^0.0.9",
"svgo": "^3.0.0"
}
}
# 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
Activates when the user asks about AI prompts, needs prompt templates, wants to search for prompts, or mentions prompts.chat. Use for discovering, retrieving, and improving prompts.
Search, retrieve, and install Agent Skills from the prompts.chat registry using MCP tools. Use when the user asks to find skills, browse skill catalogs, install a skill for Claude, or extend Claude's capabilities with reusable AI agent components.
This skill should be used when the user asks to "create an agent", "add an agent", "write a subagent", "agent frontmatter", "when to use description", "agent examples", "agent tools", "agent colors", "autonomous agent", or needs guidance on agent structure, system prompts, triggering conditions, or agent development best practices for Claude Code plugins.