From majestic-engineer
Guides creation of syntactically correct Mermaid diagrams including flowcharts, sequence diagrams, class diagrams, state diagrams, Gantt charts, ER diagrams, and data lineage visualizations.
npx claudepluginhub majesticlabs-dev/majestic-marketplace --plugin majestic-engineerThis skill is limited to using the following tools:
- **Correctness**: Follow Mermaid syntax rules strictly
Creates Mermaid diagrams for flowcharts, sequences, ERDs, architectures, Gantt charts, and more. Masters syntax for all types with styling, best practices, and rendering guidance.
Generates Mermaid diagrams for flowcharts, sequences, ERDs, architectures, Gantt charts, and more. Provides syntax mastery, styling, and best practices for visual documentation, system diagrams, process flows.
Generates Mermaid diagrams for flowcharts, sequence diagrams, state diagrams, class diagrams, ERDs, and system architectures to visualize complex concepts and processes.
Share bugs, ideas, or general feedback.
RULE: 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 references/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 references/data-lineage.md for:
Remember: The quoting rule is the #1 cause of Mermaid rendering failures. When in doubt, quote it.