skills.rest
GuilhermeBrancalhao
GuilhermeBrancalhaoCOMMUNITY
Explore all skills by this author →
GitHub

diagramar

Converts system descriptions and flows into renderable Mermaid diagrams.

Updated Aug 3, 2026
Search Tags:#documentation#mermaid#flowchart#c4 model#sequence diagram#architecture visualization#diagram
One-click install
npx skills add https://github.com/GuilhermeBrancalhao/ENGINE-CODEX --skill diagramar-guilhermebrancalhao
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: diagramar
Source: https://github.com/GuilhermeBrancalhao/ENGINE-CODEX/tree/main/motores/diagramar
Command: npx skills add https://github.com/GuilhermeBrancalhao/ENGINE-CODEX --skill diagramar-guilhermebrancalhao

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Communicating system structure, flows, and processes in text alone is slow and ambiguous, while hand-drawn images become outdated the moment the system changes. This Skill turns a description of a system, flow, or process into a minimal, renderable Mermaid diagram in the right notation for the question being asked. ## Core Features & Use Cases - Notation selection by question: Maps the user's question to the right diagram type — C4 (context, container, component), sequence, state machine, ER, BPMN, activity, deployment, or mind map — instead of drawing everything. - Mermaid-only output: Produces Mermaid syntax that renders on GitHub, MkDocs, and artifacts, avoiding pixel-locked SVG/PNG images that go stale. - Quality rules built in: Enforces legends, verb-labeled arrows, meaningful names, 5-7 box readability limits, and render validation before delivery. - Use Case: A developer asks "how does the payment flow work when the user clicks checkout?" The Skill produces a Mermaid sequence diagram with actors, labeled messages, a legend, and one line of context — no unnecessary C4 levels. ## Quick Start Ask the assistant to draw a Mermaid sequence diagram showing what happens when a user submits a payment in your checkout flow.

Frequently Asked Questions about diagramar

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a Mermaid diagram from a system description?▼

Describe the system, flow, or process and the question you want answered. The Skill picks the right notation — C4, sequence, state machine, ER, BPMN, or mind map — and outputs a Mermaid code block with a legend and brief context notes.

Which diagram type should I use for a user flow?▼

Use a sequence diagram for time-ordered interactions like "what happens when the user clicks a button". Use an activity or BPMN diagram for business processes with decisions and parallel steps, and a state machine for entity lifecycles.

What is the difference between C4 context, container, and component diagrams?▼

Context shows the system as one box among users and external systems. Container shows deployables like apps, databases, and queues. Component shows modules inside one container. Draw only the level that answers the question, not all four.

Does Mermaid render on GitHub and documentation sites?▼

Yes, Mermaid renders natively on GitHub, MkDocs, and artifact viewers, which is why the Skill uses it exclusively. Hand-drawn SVG or PNG images become outdated when the system changes and nobody updates them.

Why does my Mermaid diagram not render?▼

Mermaid silently fails on invalid syntax, and each notation has its own rules and pitfalls. Validate rendering before delivering, keep nesting under three levels in sequence diagrams, and consult the notation reference for known traps.

When should I not use a diagram at all?▼

Skip diagrams when structured prose answers the question faster, such as class-level code detail where pseudocode is more readable. Diagrams are communication tools, not documentation for its own sake.

Related Skills

Explore More Software Engineering Skills→
awslabsawslabs
15

aws-diagram

Generate AWS architecture diagrams in Mermaid and ASCII formats.

Official
Intermediate
dralkhdralkh
74

markdown-mermaid-writing

Standardize markdown documentation and Mermaid diagrams for GitHub-friendly technical content.

Community
Advanced
phishkatlabsphishkatlabs

tech-writer

Generate audience-specific documentation synced with the codebase.

Official
Advanced
RDCrystalLabRDCrystalLab

drawio

Generate editable draw.io diagrams using structured mxCell XML.

Official
Advanced