loom-diagramming

Solid

Create technical diagrams using Mermaid syntax for architecture, sequences, ERDs, flowcharts, and state machines. Use for visualizing system design, data flows, C4 models, and process diagrams in documentation.

AI & Automation 53 stars 0 forks Updated today MIT

Install

Quality Score: 88/100

Stars 20%

58

Recency 20%

100

Frontmatter 20%

70

Documentation 15%

100

Issue Health 10%

50

License 10%

100

Description 5%

100

Skill Content

# Diagramming ## Overview Create maintainable technical diagrams in Mermaid (renders in GitHub, GitLab, and most doc tools). Diagrams live in version control next to code — they must stay in sync or they mislead. This skill covers type selection, syntax, and the parsing footguns that waste the most time. ## Choose the diagram type | Type | Use when | Not when | | --------------- | ----------------------------------------------- | ---------------------------------------- | | Sequence | Interactions **over time** across participants | Showing static structure | | Flowchart | Decision logic, process/pipeline steps | Timing between services (use sequence) | | State | An entity's lifecycle + transitions/guards | Data flow or call order | | ERD | Data model, tables, cardinality | Runtime behavior | | Class | OO structure, interfaces, inheritance | Deployment or infra | | C4 (Context) | System boundary + external actors/systems | Internal code detail | | C4 (Container) | Deployable units + their tech + data stores | Class-level detail | Rule of thumb: **structure → flowchart/C4/class/ERD; behavior over time → sequence; lifecycle → state.** For architecture, prefer C4's layered zo...

Details

Author: cosmix
Repository: cosmix/loom
Created: 8 months ago
Last Updated: today
Language: Rust
License: MIT

Integrates with

GitLab · DevTools

Similar Skills

Semantically similar based on skill content — not just same category

AI & Automation Listed

mermaid-diagrams

Comprehensive guide for creating software diagrams using Mermaid syntax. Use when users need to create, visualize, or document software through diagrams including class diagrams (domain modeling, object-oriented design), sequence diagrams (application flows, API interactions, code execution), flowcharts (processes, algorithms, user journeys), entity relationship diagrams (database schemas), C4 architecture diagrams (system context, containers, components), state diagrams, git graphs, pie charts, gantt charts, or any other diagram type. Triggers include requests to "diagram", "visualize", "model", "map out", "show the flow", or when explaining system architecture, database design, code structure, or user/application flows.

0 Updated yesterday

AI & Automation Listed

mermaid-diagrams

Comprehensive guide for creating software diagrams using Mermaid syntax. Use when users need to create, visualize, or document software through diagrams including class diagrams (domain modeling, object-oriented design), sequence diagrams (application flows, API interactions, code execution), flowcharts (processes, algorithms, user journeys), entity relationship diagrams (database schemas), C4 architecture diagrams (system context, containers, components), state diagrams, git graphs, pie charts, gantt charts, or any other diagram type. Triggers include requests to "diagram", "visualize", "model", "map out", "show the flow", or when explaining system architecture, database design, code structure, or user/application flows.

0 Updated yesterday

AI & Automation Listed

mermaid-diagrams

This skill should be used when the user asks to "create a diagram", "generate a flowchart", "add a sequence diagram", "visualize architecture", "create an ER diagram", "draw a state machine", "add mermaid diagram", "diagram the data model", "show the workflow", or "map out the process". Provides Mermaid diagram syntax knowledge, diagram type selection guidance, and visual conventions for generating clear, well-structured diagrams from code or requirements.

2 Updated yesterday