odoo-forge-bundle 0.1.0 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/manifest.json +1 -1
- package/package.json +1 -1
- package/payload/config/product.json +1 -1
- package/payload/platforms/claude/plugin.template.json +1 -1
- package/payload/platforms/codex/plugin.template.json +1 -1
- package/payload/skills/mermaid-diagrams/README.md +244 -0
- package/payload/skills/mermaid-diagrams/SKILL.md +217 -0
- package/payload/skills/mermaid-diagrams/references/advanced-features.md +556 -0
- package/payload/skills/mermaid-diagrams/references/architecture-diagrams.md +192 -0
- package/payload/skills/mermaid-diagrams/references/c4-diagrams.md +410 -0
- package/payload/skills/mermaid-diagrams/references/class-diagrams.md +361 -0
- package/payload/skills/mermaid-diagrams/references/erd-diagrams.md +510 -0
- package/payload/skills/mermaid-diagrams/references/flowcharts.md +450 -0
- package/payload/skills/mermaid-diagrams/references/sequence-diagrams.md +394 -0
package/manifest.json
CHANGED
package/package.json
CHANGED
|
@@ -0,0 +1,244 @@
|
|
|
1
|
+
# Mermaid Diagrams Skill
|
|
2
|
+
|
|
3
|
+
A comprehensive guide for creating professional software diagrams using Mermaid's text-based syntax. This skill enables you to visualize system architecture, document code structure, model databases, and communicate technical concepts through diagrams.
|
|
4
|
+
|
|
5
|
+
## Purpose
|
|
6
|
+
|
|
7
|
+
Transform complex technical concepts into clear, maintainable diagrams that can be version-controlled alongside your code. Mermaid diagrams are rendered from simple text definitions, making them easy to update, review in pull requests, and maintain over time.
|
|
8
|
+
|
|
9
|
+
## When to Use This Skill
|
|
10
|
+
|
|
11
|
+
Use this skill when you need to:
|
|
12
|
+
|
|
13
|
+
- **Document architecture** - Visualize system context, containers, components, and deployment
|
|
14
|
+
- **Model domains** - Create domain models with entities, relationships, and behaviors
|
|
15
|
+
- **Explain flows** - Show API interactions, user journeys, authentication sequences
|
|
16
|
+
- **Design databases** - Document table relationships, keys, and schema structure
|
|
17
|
+
- **Plan processes** - Map workflows, decision trees, algorithms, and pipelines
|
|
18
|
+
- **Communicate designs** - Align stakeholders on technical decisions before coding
|
|
19
|
+
|
|
20
|
+
### Trigger Phrases
|
|
21
|
+
|
|
22
|
+
The skill activates when you mention:
|
|
23
|
+
- "diagram", "visualize", "model", "map out", "show the flow"
|
|
24
|
+
- "architecture diagram", "class diagram", "sequence diagram", "flowchart"
|
|
25
|
+
- "database schema", "ERD", "entity relationship"
|
|
26
|
+
- "system design", "data model", "domain model"
|
|
27
|
+
|
|
28
|
+
## How It Works
|
|
29
|
+
|
|
30
|
+
1. **Choose the right diagram type** based on what you want to communicate
|
|
31
|
+
2. **Start with core elements** - entities, actors, or components
|
|
32
|
+
3. **Add relationships** - connections, flows, interactions
|
|
33
|
+
4. **Refine incrementally** - add details, styling, notes
|
|
34
|
+
5. **Export or embed** - use in documentation, PRs, wikis
|
|
35
|
+
|
|
36
|
+
Mermaid syntax is intuitive and follows a consistent pattern across all diagram types:
|
|
37
|
+
|
|
38
|
+
```mermaid
|
|
39
|
+
diagramType
|
|
40
|
+
definition content
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
## Key Features
|
|
44
|
+
|
|
45
|
+
### 9 Diagram Types Supported
|
|
46
|
+
|
|
47
|
+
1. **Class Diagrams** - Domain models, OOP design, entity relationships
|
|
48
|
+
2. **Sequence Diagrams** - API flows, user interactions, temporal sequences
|
|
49
|
+
3. **Flowcharts** - User journeys, processes, decision logic, pipelines
|
|
50
|
+
4. **Entity Relationship Diagrams** - Database schemas, table relationships
|
|
51
|
+
5. **C4 Architecture Diagrams** - System context, containers, components
|
|
52
|
+
6. **State Diagrams** - State machines, lifecycle states
|
|
53
|
+
7. **Git Graphs** - Branching strategies, version control flows
|
|
54
|
+
8. **Gantt Charts** - Project timelines, scheduling
|
|
55
|
+
9. **Pie/Bar Charts** - Data visualization, metrics
|
|
56
|
+
|
|
57
|
+
### Advanced Capabilities
|
|
58
|
+
|
|
59
|
+
- **Themes and styling** - Default, forest, dark, neutral, base themes
|
|
60
|
+
- **Custom theming** - Configure colors, fonts, and layout
|
|
61
|
+
- **Layout options** - Dagre (balanced) or ELK (advanced)
|
|
62
|
+
- **Look options** - Classic or hand-drawn sketch style
|
|
63
|
+
- **Subgraphs** - Group related elements for clarity
|
|
64
|
+
- **Notes and comments** - Add context and explanations
|
|
65
|
+
- **Alt/loop/opt blocks** - Complex flow control in sequences
|
|
66
|
+
|
|
67
|
+
### Integration Support
|
|
68
|
+
|
|
69
|
+
- **GitHub/GitLab** - Automatic rendering in Markdown files
|
|
70
|
+
- **VS Code** - Preview with Markdown Mermaid extension
|
|
71
|
+
- **Notion, Obsidian, Confluence** - Built-in support
|
|
72
|
+
- **Export** - PNG, SVG, PDF via Mermaid Live or CLI
|
|
73
|
+
|
|
74
|
+
## Usage Examples
|
|
75
|
+
|
|
76
|
+
### Example 1: Document a Domain Model
|
|
77
|
+
|
|
78
|
+
**When:** You're designing a video streaming platform and need to model core entities.
|
|
79
|
+
|
|
80
|
+
```mermaid
|
|
81
|
+
classDiagram
|
|
82
|
+
Title -- Genre
|
|
83
|
+
Title *-- Season
|
|
84
|
+
Title *-- Review
|
|
85
|
+
User --> Review : creates
|
|
86
|
+
|
|
87
|
+
class Title {
|
|
88
|
+
+string name
|
|
89
|
+
+int releaseYear
|
|
90
|
+
+play()
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
class Genre {
|
|
94
|
+
+string name
|
|
95
|
+
+getTopTitles()
|
|
96
|
+
}
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
### Example 2: Explain an API Authentication Flow
|
|
100
|
+
|
|
101
|
+
**When:** You need to document how login works for frontend developers.
|
|
102
|
+
|
|
103
|
+
```mermaid
|
|
104
|
+
sequenceDiagram
|
|
105
|
+
participant User
|
|
106
|
+
participant API
|
|
107
|
+
participant Database
|
|
108
|
+
|
|
109
|
+
User->>API: POST /login
|
|
110
|
+
API->>Database: Query credentials
|
|
111
|
+
Database-->>API: Return user data
|
|
112
|
+
alt Valid credentials
|
|
113
|
+
API-->>User: 200 OK + JWT token
|
|
114
|
+
else Invalid credentials
|
|
115
|
+
API-->>User: 401 Unauthorized
|
|
116
|
+
end
|
|
117
|
+
```
|
|
118
|
+
|
|
119
|
+
### Example 3: Map a User Journey
|
|
120
|
+
|
|
121
|
+
**When:** You're planning a feature and need to visualize the user flow.
|
|
122
|
+
|
|
123
|
+
```mermaid
|
|
124
|
+
flowchart TD
|
|
125
|
+
Start([User visits site]) --> Auth{Authenticated?}
|
|
126
|
+
Auth -->|No| Login[Show login page]
|
|
127
|
+
Auth -->|Yes| Dashboard[Show dashboard]
|
|
128
|
+
Login --> Creds[Enter credentials]
|
|
129
|
+
Creds --> Validate{Valid?}
|
|
130
|
+
Validate -->|Yes| Dashboard
|
|
131
|
+
Validate -->|No| Error[Show error]
|
|
132
|
+
Error --> Login
|
|
133
|
+
```
|
|
134
|
+
|
|
135
|
+
### Example 4: Design a Database Schema
|
|
136
|
+
|
|
137
|
+
**When:** You're planning table relationships for a new feature.
|
|
138
|
+
|
|
139
|
+
```mermaid
|
|
140
|
+
erDiagram
|
|
141
|
+
USER ||--o{ ORDER : places
|
|
142
|
+
ORDER ||--|{ LINE_ITEM : contains
|
|
143
|
+
PRODUCT ||--o{ LINE_ITEM : includes
|
|
144
|
+
|
|
145
|
+
USER {
|
|
146
|
+
int id PK
|
|
147
|
+
string email UK
|
|
148
|
+
string name
|
|
149
|
+
datetime created_at
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
ORDER {
|
|
153
|
+
int id PK
|
|
154
|
+
int user_id FK
|
|
155
|
+
decimal total
|
|
156
|
+
datetime created_at
|
|
157
|
+
}
|
|
158
|
+
```
|
|
159
|
+
|
|
160
|
+
### Example 5: Visualize System Architecture (C4)
|
|
161
|
+
|
|
162
|
+
**When:** You need to show how systems and external services interact.
|
|
163
|
+
|
|
164
|
+
```mermaid
|
|
165
|
+
C4Context
|
|
166
|
+
title System Context Diagram for E-commerce Platform
|
|
167
|
+
|
|
168
|
+
Person(customer, "Customer", "A user browsing and purchasing products")
|
|
169
|
+
System(webApp, "Web Application", "Provides product catalog and checkout")
|
|
170
|
+
System_Ext(payment, "Payment Gateway", "Processes payments")
|
|
171
|
+
System_Ext(email, "Email Service", "Sends order confirmations")
|
|
172
|
+
|
|
173
|
+
Rel(customer, webApp, "Browses products, places orders")
|
|
174
|
+
Rel(webApp, payment, "Processes payments", "HTTPS")
|
|
175
|
+
Rel(webApp, email, "Sends notifications", "SMTP")
|
|
176
|
+
```
|
|
177
|
+
|
|
178
|
+
## Getting Started
|
|
179
|
+
|
|
180
|
+
1. **Identify what you need to communicate** - Architecture? Flow? Data model?
|
|
181
|
+
2. **Choose the appropriate diagram type** - See "Diagram Type Selection Guide" in SKILL.md
|
|
182
|
+
3. **Start simple** - Add core entities/components first
|
|
183
|
+
4. **Add relationships** - Connect elements with appropriate connectors
|
|
184
|
+
5. **Refine and style** - Add details, notes, and custom theming
|
|
185
|
+
6. **Validate** - Test in [Mermaid Live Editor](https://mermaid.live)
|
|
186
|
+
7. **Embed or export** - Use in Markdown, export as image, or integrate
|
|
187
|
+
|
|
188
|
+
## Detailed References
|
|
189
|
+
|
|
190
|
+
For comprehensive syntax and advanced features, see:
|
|
191
|
+
|
|
192
|
+
- **[SKILL.md](SKILL.md)** - Quick start guide and diagram selection
|
|
193
|
+
- **[references/class-diagrams.md](references/class-diagrams.md)** - Relationships, multiplicity, methods
|
|
194
|
+
- **[references/sequence-diagrams.md](references/sequence-diagrams.md)** - Messages, activations, loops, alt blocks
|
|
195
|
+
- **[references/flowcharts.md](references/flowcharts.md)** - Node shapes, decision logic, subgraphs
|
|
196
|
+
- **[references/erd-diagrams.md](references/erd-diagrams.md)** - Cardinality, keys, attributes
|
|
197
|
+
- **[references/c4-diagrams.md](references/c4-diagrams.md)** - Context, container, component levels
|
|
198
|
+
- **[references/architecture-diagrams.md](references/architecture-diagrams.md)** - Cloud services, infrastructure, CI/CD deployments
|
|
199
|
+
- **[references/advanced-features.md](references/advanced-features.md)** - Themes, styling, configuration
|
|
200
|
+
|
|
201
|
+
## Best Practices
|
|
202
|
+
|
|
203
|
+
1. **Start simple, iterate** - Begin with core elements, add complexity gradually
|
|
204
|
+
2. **One diagram, one concept** - Keep diagrams focused and split large views
|
|
205
|
+
3. **Use meaningful names** - Clear labels make diagrams self-documenting
|
|
206
|
+
4. **Comment liberally** - Use `%%` to explain non-obvious relationships
|
|
207
|
+
5. **Version control** - Store `.mmd` files with code, update as system evolves
|
|
208
|
+
6. **Add context** - Include titles and notes explaining diagram purpose
|
|
209
|
+
7. **Validate syntax** - Test in Mermaid Live before committing
|
|
210
|
+
8. **Keep it readable** - Don't overcrowd; split into multiple diagrams if needed
|
|
211
|
+
|
|
212
|
+
## Common Use Cases
|
|
213
|
+
|
|
214
|
+
- **Onboarding** - Help new team members understand system structure
|
|
215
|
+
- **Design reviews** - Visualize proposals before implementation
|
|
216
|
+
- **Documentation** - Create living docs that evolve with code
|
|
217
|
+
- **Architecture decisions** - Align stakeholders on technical choices
|
|
218
|
+
- **Refactoring** - Plan restructuring with before/after diagrams
|
|
219
|
+
- **API handoffs** - Document flows for frontend/backend coordination
|
|
220
|
+
- **Database migrations** - Visualize schema changes
|
|
221
|
+
|
|
222
|
+
## Tips for Success
|
|
223
|
+
|
|
224
|
+
- **Test incrementally** - Validate syntax as you build to catch errors early
|
|
225
|
+
- **Use consistent naming** - Match diagram names to code/database names
|
|
226
|
+
- **Leverage GitHub rendering** - Diagrams appear automatically in `.md` files
|
|
227
|
+
- **Export for presentations** - Use Mermaid Live or CLI for high-res exports
|
|
228
|
+
- **Collaborate** - Diagrams are great for PR discussions and design docs
|
|
229
|
+
- **Keep updated** - Update diagrams when code changes to prevent drift
|
|
230
|
+
|
|
231
|
+
## Tools and Resources
|
|
232
|
+
|
|
233
|
+
- **[Mermaid Live Editor](https://mermaid.live)** - Interactive editor with instant preview and export
|
|
234
|
+
- **[Official Documentation](https://mermaid.js.org)** - Comprehensive syntax reference
|
|
235
|
+
- **Mermaid CLI** - `npm install -g @mermaid-js/mermaid-cli` for batch exports
|
|
236
|
+
- **VS Code Extension** - "Markdown Preview Mermaid Support" for live preview
|
|
237
|
+
- **GitHub** - Native rendering in all `.md` files
|
|
238
|
+
|
|
239
|
+
## Support
|
|
240
|
+
|
|
241
|
+
For questions, syntax help, or advanced features, refer to:
|
|
242
|
+
- SKILL.md for quick reference
|
|
243
|
+
- Reference files in `references/` for detailed syntax
|
|
244
|
+
- [Mermaid official docs](https://mermaid.js.org) for latest features
|
|
@@ -0,0 +1,217 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: mermaid-diagrams
|
|
3
|
+
description: Use when users need to create, visualize, or document software with Mermaid diagrams such as class diagrams, sequence diagrams, flowcharts, ERDs, C4 architecture diagrams, state diagrams, git graphs, gantt charts, pie charts, or similar technical visuals, especially when discussing architecture, database design, code structure, or user and system flows.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# Mermaid Diagramming
|
|
7
|
+
|
|
8
|
+
Create professional software diagrams using Mermaid's text-based syntax. Mermaid renders diagrams from simple text definitions, making diagrams version-controllable, easy to update, and maintainable alongside code.
|
|
9
|
+
|
|
10
|
+
## Core Syntax Structure
|
|
11
|
+
|
|
12
|
+
All Mermaid diagrams follow this pattern:
|
|
13
|
+
|
|
14
|
+
```mermaid
|
|
15
|
+
diagramType
|
|
16
|
+
definition content
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
**Key principles:**
|
|
20
|
+
- First line declares diagram type (e.g., `classDiagram`, `sequenceDiagram`, `flowchart`)
|
|
21
|
+
- Use `%%` for comments
|
|
22
|
+
- Line breaks and indentation improve readability but aren't required
|
|
23
|
+
- Unknown words break diagrams; parameters fail silently
|
|
24
|
+
|
|
25
|
+
## Diagram Type Selection Guide
|
|
26
|
+
|
|
27
|
+
**Choose the right diagram type:**
|
|
28
|
+
|
|
29
|
+
1. **Class Diagrams** - Domain modeling, OOP design, entity relationships
|
|
30
|
+
- Domain-driven design documentation
|
|
31
|
+
- Object-oriented class structures
|
|
32
|
+
- Entity relationships and dependencies
|
|
33
|
+
|
|
34
|
+
2. **Sequence Diagrams** - Temporal interactions, message flows
|
|
35
|
+
- API request/response flows
|
|
36
|
+
- User authentication flows
|
|
37
|
+
- System component interactions
|
|
38
|
+
- Method call sequences
|
|
39
|
+
|
|
40
|
+
3. **Flowcharts** - Processes, algorithms, decision trees
|
|
41
|
+
- User journeys and workflows
|
|
42
|
+
- Business processes
|
|
43
|
+
- Algorithm logic
|
|
44
|
+
- Deployment pipelines
|
|
45
|
+
|
|
46
|
+
4. **Entity Relationship Diagrams (ERD)** - Database schemas
|
|
47
|
+
- Table relationships
|
|
48
|
+
- Data modeling
|
|
49
|
+
- Schema design
|
|
50
|
+
|
|
51
|
+
5. **C4 Diagrams** - Software architecture at multiple levels
|
|
52
|
+
- System Context (systems and users)
|
|
53
|
+
- Container (applications, databases, services)
|
|
54
|
+
- Component (internal structure)
|
|
55
|
+
- Code (class/interface level)
|
|
56
|
+
|
|
57
|
+
6. **State Diagrams** - State machines, lifecycle states
|
|
58
|
+
7. **Git Graphs** - Version control branching strategies
|
|
59
|
+
8. **Gantt Charts** - Project timelines, scheduling
|
|
60
|
+
9. **Pie/Bar Charts** - Data visualization
|
|
61
|
+
|
|
62
|
+
## Quick Start Examples
|
|
63
|
+
|
|
64
|
+
### Class Diagram (Domain Model)
|
|
65
|
+
```mermaid
|
|
66
|
+
classDiagram
|
|
67
|
+
Title -- Genre
|
|
68
|
+
Title *-- Season
|
|
69
|
+
Title *-- Review
|
|
70
|
+
User --> Review : creates
|
|
71
|
+
|
|
72
|
+
class Title {
|
|
73
|
+
+string name
|
|
74
|
+
+int releaseYear
|
|
75
|
+
+play()
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
class Genre {
|
|
79
|
+
+string name
|
|
80
|
+
+getTopTitles()
|
|
81
|
+
}
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
### Sequence Diagram (API Flow)
|
|
85
|
+
```mermaid
|
|
86
|
+
sequenceDiagram
|
|
87
|
+
participant User
|
|
88
|
+
participant API
|
|
89
|
+
participant Database
|
|
90
|
+
|
|
91
|
+
User->>API: POST /login
|
|
92
|
+
API->>Database: Query credentials
|
|
93
|
+
Database-->>API: Return user data
|
|
94
|
+
alt Valid credentials
|
|
95
|
+
API-->>User: 200 OK + JWT token
|
|
96
|
+
else Invalid credentials
|
|
97
|
+
API-->>User: 401 Unauthorized
|
|
98
|
+
end
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
### Flowchart (User Journey)
|
|
102
|
+
```mermaid
|
|
103
|
+
flowchart TD
|
|
104
|
+
Start([User visits site]) --> Auth{Authenticated?}
|
|
105
|
+
Auth -->|No| Login[Show login page]
|
|
106
|
+
Auth -->|Yes| Dashboard[Show dashboard]
|
|
107
|
+
Login --> Creds[Enter credentials]
|
|
108
|
+
Creds --> Validate{Valid?}
|
|
109
|
+
Validate -->|Yes| Dashboard
|
|
110
|
+
Validate -->|No| Error[Show error]
|
|
111
|
+
Error --> Login
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
### ERD (Database Schema)
|
|
115
|
+
```mermaid
|
|
116
|
+
erDiagram
|
|
117
|
+
USER ||--o{ ORDER : places
|
|
118
|
+
ORDER ||--|{ LINE_ITEM : contains
|
|
119
|
+
PRODUCT ||--o{ LINE_ITEM : includes
|
|
120
|
+
|
|
121
|
+
USER {
|
|
122
|
+
int id PK
|
|
123
|
+
string email UK
|
|
124
|
+
string name
|
|
125
|
+
datetime created_at
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
ORDER {
|
|
129
|
+
int id PK
|
|
130
|
+
int user_id FK
|
|
131
|
+
decimal total
|
|
132
|
+
datetime created_at
|
|
133
|
+
}
|
|
134
|
+
```
|
|
135
|
+
|
|
136
|
+
## Detailed References
|
|
137
|
+
|
|
138
|
+
For in-depth guidance on specific diagram types, see:
|
|
139
|
+
|
|
140
|
+
- **[references/class-diagrams.md](references/class-diagrams.md)** - Domain modeling, relationships (association, composition, aggregation, inheritance), multiplicity, methods/properties
|
|
141
|
+
- **[references/sequence-diagrams.md](references/sequence-diagrams.md)** - Actors, participants, messages (sync/async), activations, loops, alt/opt/par blocks, notes
|
|
142
|
+
- **[references/flowcharts.md](references/flowcharts.md)** - Node shapes, connections, decision logic, subgraphs, styling
|
|
143
|
+
- **[references/erd-diagrams.md](references/erd-diagrams.md)** - Entities, relationships, cardinality, keys, attributes
|
|
144
|
+
- **[references/c4-diagrams.md](references/c4-diagrams.md)** - System context, container, component diagrams, boundaries
|
|
145
|
+
- **[references/architecture-diagrams.md](references/architecture-diagrams.md)** - Cloud services, infrastructure, CI/CD deployments
|
|
146
|
+
- **[references/advanced-features.md](references/advanced-features.md)** - Themes, styling, configuration, layout options
|
|
147
|
+
|
|
148
|
+
## Best Practices
|
|
149
|
+
|
|
150
|
+
1. **Start Simple** - Begin with core entities/components, add details incrementally
|
|
151
|
+
2. **Use Meaningful Names** - Clear labels make diagrams self-documenting
|
|
152
|
+
3. **Comment Extensively** - Use `%%` comments to explain complex relationships
|
|
153
|
+
4. **Keep Focused** - One diagram per concept; split large diagrams into multiple focused views
|
|
154
|
+
5. **Version Control** - Store `.mmd` files alongside code for easy updates
|
|
155
|
+
6. **Add Context** - Include titles and notes to explain diagram purpose
|
|
156
|
+
7. **Iterate** - Refine diagrams as understanding evolves
|
|
157
|
+
|
|
158
|
+
## Configuration and Theming
|
|
159
|
+
|
|
160
|
+
Configure diagrams using frontmatter:
|
|
161
|
+
|
|
162
|
+
```mermaid
|
|
163
|
+
---
|
|
164
|
+
config:
|
|
165
|
+
theme: base
|
|
166
|
+
themeVariables:
|
|
167
|
+
primaryColor: "#ff6b6b"
|
|
168
|
+
---
|
|
169
|
+
flowchart LR
|
|
170
|
+
A --> B
|
|
171
|
+
```
|
|
172
|
+
|
|
173
|
+
**Available themes:** default, forest, dark, neutral, base
|
|
174
|
+
|
|
175
|
+
**Layout options:**
|
|
176
|
+
- `layout: dagre` (default) - Classic balanced layout
|
|
177
|
+
- `layout: elk` - Advanced layout for complex diagrams (requires integration)
|
|
178
|
+
|
|
179
|
+
**Look options:**
|
|
180
|
+
- `look: classic` - Traditional Mermaid style
|
|
181
|
+
- `look: handDrawn` - Sketch-like appearance
|
|
182
|
+
|
|
183
|
+
## Exporting and Rendering
|
|
184
|
+
|
|
185
|
+
**Native support in:**
|
|
186
|
+
- GitHub/GitLab - Automatically renders in Markdown
|
|
187
|
+
- VS Code - With Markdown Mermaid extension
|
|
188
|
+
- Notion, Obsidian, Confluence - Built-in support
|
|
189
|
+
|
|
190
|
+
**Export options:**
|
|
191
|
+
- [Mermaid Live Editor](https://mermaid.live) - Online editor with PNG/SVG export
|
|
192
|
+
- Mermaid CLI - `npm install -g @mermaid-js/mermaid-cli` then `mmdc -i input.mmd -o output.png`
|
|
193
|
+
- Docker - `docker run --rm -v $(pwd):/data minlag/mermaid-cli -i /data/input.mmd -o /data/output.png`
|
|
194
|
+
|
|
195
|
+
## Common Pitfalls
|
|
196
|
+
|
|
197
|
+
- **Breaking characters** - Avoid `{}` in comments, use proper escape sequences for special characters
|
|
198
|
+
- **Syntax errors** - Misspellings break diagrams; validate syntax in Mermaid Live
|
|
199
|
+
- **Overcomplexity** - Split complex diagrams into multiple focused views
|
|
200
|
+
- **Missing relationships** - Document all important connections between entities
|
|
201
|
+
|
|
202
|
+
## When to Create Diagrams
|
|
203
|
+
|
|
204
|
+
**Always diagram when:**
|
|
205
|
+
- Starting new projects or features
|
|
206
|
+
- Documenting complex systems
|
|
207
|
+
- Explaining architecture decisions
|
|
208
|
+
- Designing database schemas
|
|
209
|
+
- Planning refactoring efforts
|
|
210
|
+
- Onboarding new team members
|
|
211
|
+
|
|
212
|
+
**Use diagrams to:**
|
|
213
|
+
- Align stakeholders on technical decisions
|
|
214
|
+
- Document domain models collaboratively
|
|
215
|
+
- Visualize data flows and system interactions
|
|
216
|
+
- Plan before coding
|
|
217
|
+
- Create living documentation that evolves with code
|