skills.rest
Yidada
YidadaCOMMUNITY
Explore all skills by this author →
GitHub

draw-diagram-skill

Convert Mermaid .mmd files into high-resolution PNG images.

Updated Dec 16, 2025
One-click install
npx skills add https://github.com/Yidada/draw-diagram-skill --skill draw-diagram-skill
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: draw-diagram-skill
Source: https://github.com/Yidada/draw-diagram-skill/tree/main/draw-diagram-skill
Command: npx skills add https://github.com/Yidada/draw-diagram-skill --skill draw-diagram-skill

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you generate, review, and refine Mermaid diagrams (flowcharts, sequence diagrams, class diagrams, state diagrams, and more) to ensure correct syntax, consistent structure, and visually clear layouts. It reduces time spent debugging diagram code and improves readability across teams.

Core Features & Use Cases

  • Diagram correctness: Proactively checks Mermaid syntax and recommends fixes.
  • Structure & layout guidance: Suggestions on node naming, grouping, direction, and subgraphs for readability.
  • Use Case: Quickly draft a flowchart for a multi-step onboarding process and obtain clean, render-ready Mermaid code.

Quick Start

Provide a natural language request like: "Create a Mermaid flowchart for an order workflow with steps Start -> Validate -> Ship -> Complete," and the skill will return a ready-to-render Mermaid block.

Frequently Asked Questions about draw-diagram-skill

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

FAQPage Schema
How do I convert Mermaid diagrams to PNG images?▼

Convert Mermaid source files (.mmd) to high-resolution PNG images using the mmdc tool from @mermaid-js/mermaid-cli. Provide your Mermaid flowchart, sequence diagram, class diagram, or other supported visualization, and the Skill renders publish-ready PNG output with optional scaling.

What Mermaid diagram types can I generate?▼

You can generate flowcharts, sequence diagrams, class diagrams, state diagrams, Gantt charts, ER diagrams, and data lineage visualizations. Each diagram type converts from Mermaid text syntax to high-resolution PNG in a single operation.

How do I fix Mermaid syntax errors before rendering?▼

Provide your Mermaid diagram text and the Skill proactively checks syntax, recommends corrections, and guides structure improvements for node naming, grouping, direction, and subgraph organization to ensure render-ready output.

Can I use this Skill in restricted environments without Chromium?▼

Yes. The Skill accommodates non-sandbox Chromium environments for rendering in restricted contexts, allowing diagram generation even when standard browser environments are unavailable.

Can I scale PNG output when converting Mermaid diagrams?▼

Yes. The Skill supports optional scaling with the -s flag, letting you adjust PNG resolution and size during conversion from Mermaid source files to match publishing or display requirements.

Do I need to manually write Mermaid syntax or can I generate it from description?▼

You can provide natural language requests like 'Create a flowchart for an order workflow' and the Skill generates ready-to-render Mermaid code, eliminating manual syntax writing for rapid diagram creation.

Related Skills

Explore More Design & Creative Skills→
HeXiao-55HeXiao-55
1

mermaid-diagram

Create Mermaid diagrams from requirements and validate syntax.

Community
Advanced
krzemienskikrzemienski
2

beautiful-mermaid

Render Mermaid diagrams as SVG and PNG images.

Community
Advanced
Anders-planckAnders-planck

mermaid

Generate Mermaid diagram syntax from natural language and render SVG/PNG outputs.

Community
Intermediate
walterfanwalterfan
1

Diagram Render Skill

Render PlantUML, Mermaid, and Graphviz code blocks into PNG or SVG images.

Community
Intermediate