{"enrichment":{"faq":[{"a":"mermaid-diagramming enables you to build flowcharts by writing simple syntax that defines nodes and connections. Start by declaring `flowchart TD` (top-down) or `LR` (left-right), then define nodes using brackets or parentheses and connect them with arrows. For example, `A[Start] --> B{Decision} --> C[End]` creates a basic three-node flow. The skill guides you through syntax rules, node shapes, and logical flow structure to produce clean, renderable diagrams for documentation.","q":"How do I create a flowchart in mermaid-diagramming?"},{"a":"mermaid-diagramming covers flowcharts, sequence diagrams, entity-relationship diagrams (ERD), state machines, Gantt charts, architecture diagrams (C4), class diagrams, mindmaps, timelines, and gitgraph version control diagrams. The skill helps you select the right diagram type based on your documentation goal and audience, then provides syntax and best practices for each. This ensures your technical diagrams communicate intent clearly and fit your platform's rendering capabilities.","q":"What diagram types does mermaid-diagramming support?"},{"a":"mermaid-diagramming teaches styling through theme selection and custom CSS configuration. You can apply built-in themes (default, forest, dark, neutral) or define custom colors, fonts, and spacing via theme variables. The skill covers node styling, edge formatting, and background customization to match your documentation brand. Professional appearance also includes consistent labeling, readable font sizes, and logical layout\u2014all covered in the styling and theming guidance.","q":"How can I style and theme mermaid diagrams for professional appearance?"},{"a":"mermaid-diagramming addresses export and rendering across platforms. You can use the Mermaid Live Editor for interactive preview and SVG export, integrate Mermaid into GitHub Markdown for automatic rendering, or embed diagrams in documentation tools that support Mermaid syntax. The skill covers platform-specific rendering options, ensuring your diagrams display correctly whether in web browsers, PDF documents, or version-controlled repositories.","q":"How do I export mermaid diagrams to SVG or other formats?"},{"a":"mermaid-diagramming emphasizes scoping your diagram's purpose and audience before drafting. Best practices include using clear, descriptive labels; choosing appropriate diagram types for your content; maintaining consistent styling; grouping related nodes with subgraphs; and testing rendering across target platforms. The skill also covers accessibility considerations like color contrast and semantic structure, ensuring diagrams are usable by all readers and integrate seamlessly into your documentation workflow.","q":"What are mermaid diagramming best practices for technical documentation?"},{"a":"mermaid-diagramming teaches sequence diagram syntax for modeling interactions between actors or systems. Declare `sequenceDiagram` and define participants, then use arrows (`->`, `-->`) to show message flow with labels. For example, `Actor->>System: Request` shows a synchronous call. The skill covers participant ordering, activation boxes, loop and alt constructs for conditional logic, and rendering best practices. Sequence diagrams are ideal for documenting API flows, user interactions, and system communication patterns.","q":"How do I draw sequence diagrams with mermaid-diagramming?"}],"shadow_tags":["diagram-types","flowchart-design","sequence-interaction","data-modeling","system-architecture","visual-documentation","styling-theming","export-formats"],"summary_rewrite":"Build professional technical diagrams in Mermaid syntax covering flowcharts, sequence diagrams, entity-relationship models, state machines, Gantt charts, and architecture views. The skill guides you through scoping the diagram's purpose and audience, drafting clean code, applying consistent styling, and delivering renderable outputs for documentation."},"files":[{"bytes":6114,"path":"skills/mermaid-diagramming/SKILL.md","sha256":"f805cb95979b4517a969ab0649e61d62c1cf976f5a34f80a494302041dd54270","url":"https://skillfed.io/files/NickCrew/Claude-Cortex/mermaid-diagramming/4c03efc6/SKILL.md"}],"id":"NickCrew/Claude-Cortex/mermaid-diagramming","links":{"html":"https://skillfed.io/NickCrew/Claude-Cortex/mermaid-diagramming","md":"https://skillfed.io/NickCrew/Claude-Cortex/mermaid-diagramming.md","repo":"https://github.com/NickCrew/Claude-Cortex"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":13,"language":"Python","last_updated":"2026-06-29","license":"MIT","name":"mermaid-diagramming","publisher":"NickCrew","stars":23},"relations":{"similar":[{"id":"oakoss/agent-skills/mermaid-diagrams"},{"id":"ccheney/robust-skills/mermaid-diagrams"},{"id":"curiositech/some_claude_skills/mermaid-graph-writer"},{"id":"tech-leads-club/agent-skills/mermaid-studio"},{"id":"shep-ai/shep/mermaid-diagrams"},{"id":"softaworks/agent-toolkit/mermaid-diagrams"},{"id":"jjmartres/opencode/mermaid-diagrams"},{"id":"pedronauck/skills/mermaid-diagrams"},{"id":"Jaganpro/sf-skills/sf-diagram-mermaid"},{"id":"patricio0312rev/skills/mermaid-diagram-generator"}]},"slug":{"owner":"NickCrew","repo":"Claude-Cortex","skill":"mermaid-diagramming"},"version":"4c03efc6"}