From ring-default
Generates Mermaid diagrams (flowcharts, sequences, ER, state, Gantt, etc.) from context and opens shareable interactive mermaid.live URLs in browser for code, architecture, process visuals.
npx claudepluginhub lerianstudio/ring --plugin ring-defaultThis skill uses the workspace's default tool permissions.
Generate Mermaid diagrams and open them directly in mermaid.live in the user's browser.
Creates isolated Git worktrees for feature branches with prioritized directory selection, gitignore safety checks, auto project setup for Node/Python/Rust/Go, and baseline verification.
Executes implementation plans in current session by dispatching fresh subagents per independent task, with two-stage reviews: spec compliance then code quality.
Dispatches parallel agents to independently tackle 2+ tasks like separate test failures or subsystems without shared state or dependencies.
Generate Mermaid diagrams and open them directly in mermaid.live in the user's browser.
Choose the most appropriate Mermaid diagram type:
| Need | Diagram Type | Keyword |
|---|---|---|
| Process flow, decision trees | Flowchart | flowchart TD or flowchart LR |
| API calls, message passing | Sequence | sequenceDiagram |
| OOP structure, interfaces | Class | classDiagram |
| Database schema, entities | ER | erDiagram |
| State machines, lifecycles | State | stateDiagram-v2 |
| Project timelines | Gantt | gantt |
| Distribution/proportions | Pie | pie |
| Git branch strategy | Git Graph | gitGraph |
| User experience mapping | Journey | journey |
| Prioritization matrix | Quadrant | quadrantChart |
| Data over time | XY Chart | xychart-beta |
| Chronological events | Timeline | timeline |
| Brainstorming | Mindmap | mindmap |
Write clean, well-structured Mermaid code. Key syntax rules:
Flowchart nodes:
A[Rectangle] A(Rounded) A{Diamond} A((Circle)) A[(Database)]--> (arrow), -.-> (dotted), ==> (thick), ~~~ (invisible)A -->|label| Bsubgraph title ... endSequence diagrams:
participant A or actor A->> (solid+arrow), -->> (dotted+arrow), -x (destroy), -) (async)loop, alt/else, opt, par/and, critical/option, breakNote right of A: textautonumber for sequence numbersER diagrams:
||--o{ (one to many), ||--|| (one to one), }o--o{ (many to many)-- (identifying/solid), .. (non-identifying/dashed)ENTITY { type name PK/FK/UK "comment" }Class diagrams:
+ public, - private, # protected, ~ package<|-- inheritance, *-- composition, o-- aggregation, --> association<<interface>>, <<abstract>> annotationsState diagrams:
[*] for start/end statesstate "description" as s1<<choice>>, <<fork>>, <<join>>-- separator for concurrent statesCRITICAL: Avoid the word end in lowercase inside node labels -- it's a reserved keyword. Use End, END, or wrap in quotes.
Write the mermaid code to a temp file, then use the bundled encoder script:
# macOS: uses `open`. On Linux, replace `open` with `xdg-open`.
cat <<'MERMAID_EOF' | python3 ~/.claude/skills/diagram/mermaid-encode.py | xargs open
<mermaid code here>
MERMAID_EOF
Options:
--theme dark -- use dark theme (options: default, dark, forest, neutral)--view -- open in view-only mode (no editor)--rough -- hand-drawn/sketchy styleExample with options:
cat <<'MERMAID_EOF' | python3 ~/.claude/skills/diagram/mermaid-encode.py --theme forest --rough | xargs open
flowchart LR
A[Start] --> B{Decision}
B -->|Yes| C[Do thing]
B -->|No| D[Other thing]
MERMAID_EOF
After opening the browser, tell the user:
classDef to highlight important nodes (errors in red, success in green, etc.)flowchart TD
subgraph Client
A[Browser] --> B[Mobile App]
end
subgraph API["API Gateway"]
C[Load Balancer]
end
subgraph Services
D[Auth Service]
E[Core Service]
F[Notification Service]
end
Client --> API --> Services
erDiagram
USER ||--o{ ORDER : places
ORDER ||--|{ LINE_ITEM : contains
PRODUCT ||--o{ LINE_ITEM : "ordered in"
sequenceDiagram
autonumber
Client->>+API: POST /resource
API->>+DB: INSERT
DB-->>-API: OK
API-->>-Client: 201 Created
open command) -- for Linux, users would need xargs xdg-open--rough flag gives a hand-drawn sketchy look (nice for presentations)