mermaid-renderer

Solid

Render Mermaid diagrams to images with theme customization and Markdown integration

AI & Automation 1,160 stars 71 forks Updated today MIT

Install

View on GitHub

Quality Score: 96/100

Stars 20%
100
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
50
License 10%
100
Description 5%
100

Skill Content

# Mermaid Diagram Renderer Skill ## Overview Renders Mermaid diagram definitions to images supporting flowcharts, sequence diagrams, class diagrams, ER diagrams, and more with theme customization. ## Capabilities - Render Mermaid to PNG, SVG, PDF formats - Support flowcharts, sequence, class, ER, Gantt, pie, journey diagrams - Theme customization (default, dark, forest, neutral) - Integration with Markdown documentation - Background color and styling options - Puppeteer-based rendering for high quality ## Target Processes - c4-model-documentation - microservices-decomposition - data-architecture-design ## Input Schema ```json { "type": "object", "required": ["source"], "properties": { "source": { "type": "string", "description": "Mermaid diagram definition" }, "outputFormat": { "type": "string", "enum": ["png", "svg", "pdf"], "default": "svg" }, "outputPath": { "type": "string", "description": "Output file path" }, "theme": { "type": "string", "enum": ["default", "dark", "forest", "neutral"], "default": "default" }, "config": { "type": "object", "properties": { "backgroundColor": { "type": "string", "default": "white" }, "width": { "type": "number" }, "height": { "type": "number" } } } } } ``` ## Output Schema ```json { "type": "object", "properties": ...

Details

Author
a5c-ai
Repository
a5c-ai/babysitter
Created
4 months ago
Last Updated
today
Language
JavaScript
License
MIT

Similar Skills

Semantically similar based on skill content — not just same category

AI & Automation Listed

mermaid-diagram

Generate beautiful Mermaid diagrams — flowcharts, sequence, ER, class, state, pie, gantt, mindmap, timeline, gitgraph, C4, kanban, block, quadrant, sankey, XY charts. Renders to PNG locally and Markdown for GitHub. Use when the user asks for diagrams, visualizations, schemas, flowcharts, architecture overviews, database schemas, API flows, project timelines, git branching strategies, org charts, or any visual representation of systems, workflows, or data.

24 Updated 2 days ago
georgekhananaev
AI & Automation Solid

mermaid

Render Mermaid diagrams as SVG or ASCII art using beautiful-mermaid. Use when users need to create flowcharts, sequence diagrams, state diagrams, class diagrams, or ER diagrams. Supports both graphical SVG output and terminal-friendly ASCII/Unicode output.

27,352 Updated today
iOfficeAI
AI & Automation Listed

mermaid

Side-route utility skill for generating Mermaid diagram code from a description. Use when the user wants a flowchart, sequence diagram, class diagram, ER diagram, state machine, Gantt chart, mindmap, C4 architecture, user journey, or any of 23 supported Mermaid diagram types — often during /shape, /research, /write-a-prd, or /prd-to-issues when a visual would clarify scope, flow, or structure. Not for free-form ASCII sketches, hand-drawn whiteboards (use /excalidraw-diagram for that), or rendering diagrams to images.

2 Updated 2 days ago
chrislacey89
AI & Automation Solid

mermaid-studio

Expert Mermaid diagram creation, validation, and rendering with dual-engine output (SVG/PNG/ASCII). Supports all 20+ diagram types including C4 architecture, AWS architecture-beta with service icons, flowcharts, sequence, ERD, state, class, mindmap, timeline, git graph, sankey, and more. Features code-to-diagram analysis, batch rendering, 15+ themes, and syntax validation. Use when users ask to create diagrams, visualize architecture, render mermaid files, generate ASCII diagrams, document system flows, model databases, draw AWS infrastructure, analyze code structure, or anything involving "mermaid", "diagram", "flowchart", "architecture diagram", "sequence diagram", "ERD", "C4", "ASCII diagram". Do NOT use for non-Mermaid image generation, data plotting with chart libraries, or general documentation writing.

4,491 Updated today
tech-leads-club
AI & Automation Listed

mermaid-studio

Expert Mermaid diagram creation, validation, and rendering with dual-engine output (SVG/PNG/ASCII). Supports all 20+ diagram types including C4 architecture, AWS architecture-beta with service icons, flowcharts, sequence, ERD, state, class, mindmap, timeline, git graph, sankey, and more. Features code-to-diagram analysis, batch rendering, 15+ themes, and syntax validation. Use when users ask to create diagrams, visualize architecture, render mermaid files, generate ASCII diagrams, document system flows, model databases, draw AWS infrastructure, analyze code structure, or anything involving "mermaid", "diagram", "flowchart", "architecture diagram", "sequence diagram", "ERD", "C4", "ASCII diagram". Do NOT use for non-Mermaid image generation, data plotting with chart libraries, or general documentation writing.

0 Updated 3 weeks ago
oiagorodrigues