{"enrichment":{"faq":[{"a":"Mermaid Diagrams lets you create flowcharts using simple markdown syntax. Define nodes with text labels, connect them with arrows, and specify shapes (rectangles, diamonds, circles) to represent different elements. You can style colors, add notes, and render interactive diagrams directly in your documentation or web applications.","q":"How do I create a flowchart diagram with mermaid-diagrams?"},{"a":"Mermaid Diagrams supports flowcharts, sequence diagrams, class diagrams, entity-relationship diagrams, Gantt charts, state diagrams, mindmaps, git graphs, user journey maps, and pie charts. Each type uses Mermaid markdown syntax, allowing you to define complex visual documentation programmatically without manual drawing tools.","q":"What diagram types does mermaid-diagrams support?"},{"a":"Mermaid Diagrams enables sequence diagram creation by defining actors and their interactions in order. Specify participants, message flows between them, and optional notes. The syntax is straightforward\u2014list actors, then describe messages with arrows to show timing and dependencies in your system interactions.","q":"How to make sequence diagrams with mermaid-diagrams?"},{"a":"Yes, Mermaid Diagrams generates entity-relationship diagrams using Mermaid syntax. Define entities, their attributes, and relationships with cardinality notation. This allows you to visualize database schemas and data models directly from code, making it easy to document and share your data architecture.","q":"Can mermaid-diagrams generate ER diagram visualization?"},{"a":"Mermaid Diagrams can be integrated into React by rendering Mermaid markdown syntax within your components. Pass diagram definitions as strings, and the library renders them as SVG visualizations. This enables dynamic diagram generation based on application state or data, supporting interactive documentation within your React apps.","q":"How do I integrate mermaid-diagrams into React applications?"},{"a":"Mermaid Diagrams is released under the MIT license, making it free for commercial and personal use. The skill includes full syntax reference and best practices for all supported diagram types, helping you learn Mermaid markdown and create professional visual documentation efficiently.","q":"What is the mermaid-diagrams license and syntax reference?"}],"shadow_tags":["ascii-art-alternative","code-based-graphics","documentation-visualization","uml-diagram-support","text-to-diagram","architecture-mapping","project-planning-charts","software-design-tools"],"summary_rewrite":"Mermaid Diagrams enables you to build flowcharts, sequence diagrams, class diagrams, entity-relationship diagrams, Gantt charts, and other visual documentation using Mermaid markdown syntax. The skill supports multiple diagram types with full syntax reference and styling options."},"files":[{"bytes":7577,"path":"workflows/talk-to-slidev-workflow/.claude/skills/mermaid-diagrams/SKILL.md","sha256":"6912d333164ad9860f576dca1a19f54e6c49561cca6286eac0d794115708b88a","url":"https://skillfed.io/files/nicepkg/ai-workflow/mermaid-diagrams/2d4fc3df/SKILL.md"}],"id":"nicepkg/ai-workflow/mermaid-diagrams","links":{"html":"https://skillfed.io/nicepkg/ai-workflow/mermaid-diagrams","md":"https://skillfed.io/nicepkg/ai-workflow/mermaid-diagrams.md","repo":"https://github.com/nicepkg/ai-workflow"},"meta":{"agents_supported":["claude-code"],"first_seen":"2026-07-28","forks":45,"language":"HTML","last_updated":"2026-01-20","license":"MIT","name":"mermaid-diagrams","publisher":"nicepkg","stars":270},"relations":{"similar":[{"id":"hoodini/ai-agents-skills/mermaid-diagrams"},{"id":"claude-office-skills/skills/diagram-creator"},{"id":"majesticlabs-dev/majestic-marketplace/mermaid-builder"},{"id":"shiwenwen/hope-agent/mermaid-diagram"},{"id":"ccheney/robust-skills/mermaid-diagrams"},{"id":"veelenga/claude-mermaid/mermaid-diagrams"},{"id":"rysweet/amplihack/mermaid-diagram-generator"},{"id":"shep-ai/shep/mermaid-diagrams"},{"id":"softaworks/agent-toolkit/mermaid-diagrams"},{"id":"jjmartres/opencode/mermaid-diagrams"}]},"slug":{"owner":"nicepkg","repo":"ai-workflow","skill":"mermaid-diagrams"},"version":"2d4fc3df"}