Expert guidance for creating syntactically correct Mermaid diagrams. Use when creating flowcharts, sequence diagrams, class diagrams, state diagrams, Gantt charts, ER diagrams, or data lineage visualizations.
Provides expert guidance for creating syntactically correct Mermaid diagrams. Use when generating flowcharts, sequence diagrams, class diagrams, state diagrams, Gantt charts, ER diagrams, or data lineage visualizations to ensure proper syntax and avoid common rendering errors.
/plugin marketplace add majesticlabs-dev/majestic-marketplace/plugin install majestic-engineer@majestic-marketplaceThis skill is limited to using the following tools:
resources/data-lineage.mdresources/diagram-examples.mdRULE: Wrap labels in double quotes if they contain spaces, special characters, or punctuation.
%% CORRECT - labels with spaces quoted
flowchart LR
A["User Login"] --> B["Process Request"]
C["Pay $100?"] --> D["Confirm (Yes/No)"]
%% WRONG - will fail to render
flowchart LR
A[User Login] --> B[Process Request]
Must quote: Spaces, special chars ($%&), punctuation (:,;), operators (()[])
Optional: Simple alphanumeric (Login, Process, Node1)
When in doubt, use quotes. It never hurts.
| Syntax | Shape |
|---|---|
["Text"] | Rectangle |
("Text") | Rounded |
{"Text"} | Diamond (decision) |
[("Text")] | Cylinder (database) |
(("Text")) | Circle |
| Syntax | Type |
|---|---|
--> | Solid arrow |
--- | Solid line |
-.-> | Dotted arrow |
==> | Thick arrow |
| `--> | Label |
| Type | Declaration | Use Case |
|---|---|---|
| Flowchart | flowchart TD | Processes, workflows, decisions |
| Sequence | sequenceDiagram | Component interactions, API flows |
| Class | classDiagram | OOP structure, models |
| State | stateDiagram-v2 | State transitions |
| Gantt | gantt | Timelines, scheduling |
| ER | erDiagram | Database schema |
| Pie | pie | Proportional data |
Directions: TB/TD (top-down), BT (bottom-up), LR (left-right), RL (right-left)
See resources/diagram-examples.md for complete examples of each diagram type.
flowchart TD
Start["Start"] --> Check{Valid?}
Check -->|Yes| Process["Process"]
Check -->|No| Error["Error"]
Process --> End["End"]
sequenceDiagram
Client->>Server: Request
Server-->>Client: Response
erDiagram
USER ||--o{ ORDER : "places"
USER { int id PK string email }
ORDER { int id PK int user_id FK }
flowchart TD
subgraph "Frontend"
A["UI"]
end
subgraph "Backend"
B["API"]
C[("DB")]
end
A --> B --> C
flowchart TD
A["Success"] --> B["Error"]
classDef successStyle fill:#C8E6C9,stroke:#388E3C
classDef errorStyle fill:#FFCDD2,stroke:#D32F2F
class A successStyle
class B errorStyle
| Error | Wrong | Correct |
|---|---|---|
| Unquoted spaces | A[User Login] | A["User Login"] |
| Invalid arrow | A -> B | A --> B |
| Unquoted special | A[Cost: $100] | A["Cost: $100"] |
| Missing bracket | A["Node --> B | A["Node"] --> B |
--> not ->)See resources/data-lineage.md for:
Remember: The quoting rule is the #1 cause of Mermaid rendering failures. When in doubt, quote it.
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.
Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.
Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.