skills.rest
modu-ai
modu-aiOFFICIAL
Explore all skills by this author →
Website𝕏@MODU_AIGitHub

svg-diagram

Convert Mermaid syntax to SVG diagrams with theme color customization.

267|63|Updated Feb 15, 2026
Search Tags:#design#mermaid#flowchart#visualization#svg#diagram#kpi
One-click install
npx skills add https://github.com/modu-ai/smart-cowork-life --skill svg-diagram-modu-ai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: svg-diagram
Source: https://github.com/modu-ai/smart-cowork-life/tree/main/smart-cowork-life/skills/svg-diagram
Command: npx skills add https://github.com/modu-ai/smart-cowork-life --skill svg-diagram-modu-ai

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires sharp, puppeteer, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill automates the creation of professional SVG diagrams for business documents, transforming text-based descriptions into visual assets and ensuring brand consistency.

Core Features & Use Cases

  • Mermaid to SVG Conversion: Converts Mermaid syntax into theme-aligned SVG diagrams.
  • Custom SVG Generation: Creates various diagrams like process flows, org charts, KPI cards, and comparison tables directly from code.
  • Use Case: Quickly generate a process flow diagram for a new project proposal using Mermaid syntax, ensuring it matches your company's branding colors, and embed it directly into your presentation.

Quick Start

Use the svg-diagram skill to convert the following Mermaid code into an SVG file: flowchart LR A[Start] --> B{Decision}; B -->|Yes| C[End]; B -->|No| D[Process]; D --> C;

Frequently Asked Questions about svg-diagram

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

FAQPage Schema
How do I convert Mermaid syntax to an SVG file for a business presentation?▼

You can convert Mermaid syntax to SVG by providing the text-based diagram code to the generator, which utilizes Mermaid CLI to render the visual output. This process transforms text descriptions into professional visual assets suitable for business documents.

Can I customize the theme colors of a generated SVG diagram?▼

Yes, SVG diagram generation supports theme color customization to ensure brand consistency. This allows you to align the colors of your process flows and org charts directly with your company's branding guidelines.

What types of custom SVG diagrams can I generate directly from code?▼

You can directly generate custom SVG diagrams including process flows, org charts, KPI cards, and comparison tables. Custom SVG creation functions handle the direct rendering to produce these specific visual formats for business documents.

Does this SVG diagram generator require Puppeteer and Sharp to function?▼

The SVG diagram generation process relies on Puppeteer and Sharp dependencies to function. These libraries facilitate the underlying rendering and image processing required to convert Mermaid syntax and create custom SVG outputs.

What is the best way to create a process flow diagram for a project proposal?▼

The best way to create a process flow diagram is to use Mermaid syntax to define the steps and convert it into an SVG file. This approach ensures the diagram matches your branding colors and can be embedded directly into your presentation.

Related Skills

Explore More Design & Creative Skills→
mgajewskikmgajewskik
6

mermaid-diagrams

Render Mermaid syntax into SVG, PNG, or PDF outputs.

Community
Intermediate
XyHalcyonXyHalcyon

architecture-diagram

Generate dark-themed SVG architecture diagrams and convert them to HTML files.

Community
Intermediate
spqwspqw

observable-framework-lib-htl

Generate secure HTML and SVG templates with automatic escaping in Observable Framework.

Community
Basic
ezjonlineezjonline
1

excalidraw-flowchart

Generate editable Excalidraw flowcharts from process descriptions and job postings.

Community
Intermediate