Diagramming
Create technical diagrams using Mermaid syntax for architecture, sequences, ERDs...
Install
npx skills add ynulihao/AgentSkillOS --skill diagramming -g -a claude-code -y- Repository
- ynulihao/AgentSkillOS618
- Category
- Design
- Updated
- 8mo ago
- License
- See repository
- Context cost
- Mediumabout 2,312 tokens
- Runs scripts
- No, instructions only
What it does
Create technical diagrams using Mermaid syntax for architecture, sequences, ERDs, flowcharts, and state machines. Use for visualizing system design, data flows, and processes. Triggers: diagram, mermaid, architecture diagram, sequence diagram, flowchart, ERD, entity relationship, state diagram, C4 model, component diagram, visualize, draw.
Diagramming
Overview
Create clear, maintainable technical diagrams using Mermaid syntax. This skill covers architecture diagrams, sequence diagrams, entity-relationship diagrams, flowcharts, and state diagrams for documenting software systems.
Instructions
1. Choose the Right Diagram Type
| Diagram Type | Use When |
|---|---|
| Architecture/C4 | Showing system structure and components |
| Sequence | Showing interactions over time |
| ERD | Showing data models and relationships |
| Flowchart | Showing decision logic and processes |
| State | Showing state transitions |
2. General Mermaid Principles
- Keep diagrams focused on one concept
- Use consistent naming conventions
- Add descriptive labels to relationships
- Limit complexity (split large diagrams)
- Use comments for documentation
Best Practices
- Simplicity: One diagram, one concept
- Consistency: Same naming across related diagrams
- Readability: Left-to-right or top-to-bottom flow
- Labels: Always label relationships and transitions
- Context: Include a title and brief description
Examples
Architecture Diagrams (C4 Model)
Context Diagram (Level 1)
C4Context
title System Context Diagram for E-Commerce Platform
Person(customer, "Customer", "A user who purchases products")
Person(admin, "Admin", "Manages products and orders")
System(ecommerce, "E-Commerce Platform", "Allows customers to browse and purchase products")
System_Ext(payment, "Payment Gateway", "Handles payment processing")
System_Ext(shipping, "Shipping Provider", "Handles order fulfillment")
System_Ext(email, "Email Service", "Sends notifications")
