Mermaid diagrams

Skill jgamaraalv/delivery-loop/.claude/skills/mermaid-diagrams

Continuous fullstack delivery loops — orchestrates frontend, backend, and quality subagents (behaviour drivers, engineers, UI/UX specialist, code/security reviewers, architects) in a test → diagnose → fix → review → secure → re-test cycle until the work is production-ready

Install

npx -y skills add jgamaraalv/delivery-loop --skill mermaid-diagrams

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Create software diagrams in Mermaid — class, sequence, flowchart, ERD, C4, state, gitgraph, gantt. Use to "diagram", "visualize", "map out", or "show the flow" of architecture, database schemas, code structure, or user/app flows.

SKILL.md

5.1 KB, as published. Nobody here has run it

Mermaid Diagramming

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.

Core Syntax Structure

All Mermaid diagrams follow this pattern:

diagramType
  definition content

Key principles:

First line declares diagram type (e.g., classDiagram, sequenceDiagram, flowchart)
Use %% for comments
Line breaks and indentation improve readability but aren't required
Unknown words break diagrams; parameters fail silently

Diagram Type Selection Guide

Choose the right diagram type:

Class Diagrams - Domain modeling, OOP design, entity relationships
- Domain-driven design documentation
- Object-oriented class structures
- Entity relationships and dependencies
Sequence Diagrams - Temporal interactions, message flows
- API request/response flows
- User authentication flows
- System component interactions
- Method call sequences
Flowcharts - Processes, algorithms, decision trees
- User journeys and workflows
- Business processes
- Algorithm logic
- Deployment pipelines
Entity Relationship Diagrams (ERD) - Database schemas
- Table relationships
- Data modeling
- Schema design
C4 Diagrams - Software architecture at multiple levels
- System Context (systems and users)
- Container (applications, databases, services)
- Component (internal structure)
- Code (class/interface level)
State Diagrams - State machines, lifecycle states
Git Graphs - Version control branching strategies
Gantt Charts - Project timelines, scheduling
Pie/Bar Charts - Data visualization

Detailed References

Copy-paste starting points for the four most common types live in references/quick-start-examples.md. For in-depth guidance on specific diagram types, see:

references/class-diagrams.md - Domain modeling, relationships (association, composition, aggregation, inheritance), multiplicity, methods/properties
references/sequence-diagrams.md - Actors, participants, messages (sync/async), activations, loops, alt/opt/par blocks, notes
references/flowcharts.md - Node shapes, connections, decision logic, subgraphs, styling
references/erd-diagrams.md - Entities, relationships, cardinality, keys, attributes
references/c4-diagrams.md - System context, container, component diagrams, boundaries
references/architecture-diagrams.md - Cloud services, infrastructure, CI/CD deployments
references/advanced-features.md - Themes, styling, configuration, layout options

Best Practices

Start Simple - Begin with core entities/components, add details incrementally
Use Meaningful Names - Clear labels make diagrams self-documenting
Comment Extensively - Use %% comments to explain complex relationships
Keep Focused - One diagram per concept; split large diagrams into multiple focused views
Version Control - Store .mmd files alongside code for easy updates
Add Context - Include titles and notes to explain diagram purpose
Iterate - Refine diagrams as understanding evolves

Configuration and Theming

Configure diagrams using frontmatter:

---
config:
  theme: base
  themeVariables:
    primaryColor: "#ff6b6b"
---
flowchart LR
    A --> B

Available themes: default, forest, dark, neutral, base

Layout options:

layout: dagre (default) - Classic balanced layout
layout: elk - Advanced layout for complex diagrams (requires integration)

Look options:

look: classic - Traditional Mermaid style
look: handDrawn - Sketch-like appearance

Exporting and Rendering

Native support in:

GitHub/GitLab - Automatically renders in Markdown
VS Code - With Markdown Mermaid extension
Notion, Obsidian, Confluence - Built-in support

Export options:

Mermaid Live Editor - Online editor with PNG/SVG export
Mermaid CLI - npm install -g @mermaid-js/mermaid-cli then mmdc -i input.mmd -o output.png
Docker - docker run --rm -v $(pwd):/data minlag/mermaid-cli -i /data/input.mmd -o /data/output.png

Common Pitfalls

Breaking characters - Avoid {} in comments, use proper escape sequences for special characters
Syntax errors - Misspellings break diagrams; validate syntax in Mermaid Live
Overcomplexity - Split complex diagrams into multiple focused views
Missing relationships - Document all important connections between entities