{"enrichment":{"faq":[{"a":"mermaid-diagrams enables you to build software visualizations using simple text syntax. Write diagram code directly in markdown files, VS Code, or the Mermaid live editor, then render it as SVG or PNG. mermaid-diagrams supports flowcharts, sequence diagrams, class diagrams, entity relationship diagrams, C4 architecture models, state machines, Gantt charts, and git graphs\u2014all without leaving your text editor. Export to GitHub, documentation sites, or image files for sharing.","q":"How to create mermaid diagrams for software documentation?"},{"a":"mermaid-diagrams flowchart syntax uses simple node and arrow declarations. Start with `flowchart TD` (top-down) or `LR` (left-right), then define nodes with labels and connect them using arrows. For example: `A[Start] --> B{Decision} --> C[Process] --> D[End]`. mermaid-diagrams handles styling, alignment, and rendering automatically. Refer to the diagram types reference to choose between flowchart, graph, or state machine syntax based on your process modeling needs.","q":"What mermaid syntax should I use for flowcharts?"},{"a":"mermaid-diagrams sequence diagrams model interactions between actors and systems. Use `sequenceDiagram` syntax to declare participants, then define message flows with `->` or `-->` arrows. Example: `Alice->>Bob: Hello` shows a message from Alice to Bob. mermaid-diagrams automatically handles lifelines and timing. This is ideal for documenting API interactions, microservice communication, and request-response flows in your system architecture.","q":"How do I make a sequence diagram with mermaid?"},{"a":"Yes, mermaid-diagrams includes ERD (entity relationship diagram) support for database schema visualization. Use `erDiagram` syntax to define entities and their relationships with cardinality notation. mermaid-diagrams renders tables, columns, and relationship lines automatically. This is perfect for documenting database design, domain modeling, and data structure before implementation. Export the diagram for architecture documentation or GitHub wikis.","q":"Can mermaid-diagrams create entity relationship diagrams?"},{"a":"mermaid-diagrams C4 diagrams visualize system architecture at multiple levels: context (system boundary), containers (applications/services), components (internal building blocks), and code (classes/functions). Use C4 syntax to show how systems interact, dependencies, and technology choices. mermaid-diagrams renders these hierarchically, making them ideal for communicating architecture to stakeholders, documenting microservices, and planning system design before development.","q":"What are mermaid C4 architecture diagrams used for?"},{"a":"mermaid-diagrams renders natively in GitHub markdown files\u2014paste your diagram code in a markdown code block with the `mermaid` language tag and GitHub displays it automatically. For VS Code, use Mermaid extensions to preview and export as PNG or SVG. The Mermaid live editor also supports direct export. mermaid-diagrams diagrams work in any platform supporting SVG or markdown rendering, making them ideal for documentation sites, wikis, and version control.","q":"How do I export mermaid diagrams for GitHub and documentation?"}],"shadow_tags":["text-based-diagrams","architecture-visualization","domain-modeling","flowchart-builder","database-schema-design","system-documentation","code-visualization","diagram-as-code","workflow-mapping","technical-design"],"summary_rewrite":"Master Mermaid's text-based diagramming to visualize software architecture, data flows, and system design. This skill covers class diagrams for domain modeling, sequence diagrams for API interactions, flowcharts for processes, entity relationship diagrams for databases, and C4 architecture diagrams for system structure. Learn syntax fundamentals, diagram selection, best practices, and export options for GitHub, VS Code, and other platforms."},"files":[{"bytes":7479,"path":"skills/mermaid-diagrams/SKILL.md","sha256":"79bca3c767a821a28aa7d83a9673010b2066afa4889923ea5946153c8967e824","url":"https://skillfed.io/files/softaworks/agent-toolkit/mermaid-diagrams/3df36ec5/SKILL.md"}],"id":"softaworks/agent-toolkit/mermaid-diagrams","links":{"html":"https://skillfed.io/softaworks/agent-toolkit/mermaid-diagrams","md":"https://skillfed.io/softaworks/agent-toolkit/mermaid-diagrams.md","repo":"https://github.com/softaworks/agent-toolkit"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":214,"language":"Python","last_updated":"2026-03-05","license":"MIT","name":"mermaid-diagrams","publisher":"softaworks","stars":2243},"relations":{"similar":[{"id":"shep-ai/shep/mermaid-diagrams"},{"id":"jjmartres/opencode/mermaid-diagrams"},{"id":"pedronauck/skills/mermaid-diagrams"},{"id":"el-feo/ai-context/mermaid-diagrams"},{"id":"oakoss/agent-skills/mermaid-diagrams"},{"id":"ccheney/robust-skills/mermaid-diagrams"},{"id":"veelenga/claude-mermaid/mermaid-diagrams"},{"id":"nicepkg/ai-workflow/mermaid-diagrams"},{"id":"SpillwaveSolutions/design-doc-mermaid/design-doc-mermaid"},{"id":"hoodini/ai-agents-skills/mermaid-diagrams"}]},"slug":{"owner":"softaworks","repo":"agent-toolkit","skill":"mermaid-diagrams"},"version":"3df36ec5"}