メニュー
Multi-format diagram generation from text descriptions. Create Mermaid, PlantUML, D2, and Graphviz diagrams including flowcharts, sequence diagrams, architecture diagrams (C4), and data models.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/a5c-ai/babysitter --skill diagram-generationコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
Reference for querying the Atlas knowledge graph through its MCP tools — the SECONDARY enrichment/comparison layer that adds best-practice context to systems you have ALREADY scanned from your real sources (`az`, repos, dirs). Use when you need to look up nodes, edges, kinds, clusters, stats, or wiki pages in Atlas to compare against your real inventory. (atlas graph, query atlas, atlas mcp, search the graph, graph neighbors, atlas record, atlas kinds, enrichment layer)
Atlas turns your STATED NEED into a real systems atlas by SCANNING your actual sources (Azure via `az`, git repos, local dirs) and process/data mining them, THEN enriching against the Atlas knowledge graph. Use this skill when asked to inventory/map your real systems, scan your cloud + repos + directories, mine the real processes or data they contain, or collect their real constraints/gotchas. (atlas, scan my systems, inventory our azure account, map my repos, real systems atlas, process mining, data mining, collect nuances, system discovery)
This skill should be used when the user asks to "find skills in the wild", "assimilate popular workflows", "discover SKILL.md files in repos", "research external skills", "find workflow patterns", "survey the skill landscape", "what skills exist out there", or wants to investigate public repositories for extractable processes, babysitter plugins, and reusable procedural insights. Searches GitHub for SKILL.md files, classifies repos by archetype, and maintains structured research under docs/reference-repos/.
SKILL.md を表示中
SOC 職業分類に基づく
| name | diagram-generation |
| description | Multi-format diagram generation from text descriptions. Create Mermaid, PlantUML, D2, and Graphviz diagrams including flowcharts, sequence diagrams, architecture diagrams (C4), and data models. |
| allowed-tools | Read, Write, Edit, Bash, Glob, Grep |
| backlog-id | SK-006 |
| metadata | {"author":"babysitter-sdk","version":"1.0.0"} |
| graph | {"domains":["domain:software-engineering"],"specializations":["specialization:technical-documentation"],"skillAreas":["skill-area:docs-as-code","skill-area:c4-modeling"],"roles":["role:technical-writer","role:documentation-engineer"]} |
Multi-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