skills.rest
berrzebb
berrzebbCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

diagram

Generate flowcharts, sequence diagrams, ERDs, and more from Mermaid syntax.

22|7|Updated Feb 23, 2026
Search Tags:#documentation#mermaid#flowchart#visualization#svg#diagram
One-click install
npx skills add https://github.com/berrzebb/SoulFlow-Orchestrator --skill diagram-berrzebb
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: diagram
Source: https://github.com/berrzebb/SoulFlow-Orchestrator/tree/main/src/skills/diagram
Command: npx skills add https://github.com/berrzebb/SoulFlow-Orchestrator --skill diagram-berrzebb

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill automates the creation of various diagrams (flowcharts, sequence diagrams, ERDs, etc.) directly from text-based descriptions, eliminating the need for manual drawing tools.

Core Features & Use Cases

  • Mermaid Diagram Generation: Renders flowcharts, sequence diagrams, ERDs, class diagrams, state diagrams, Gantt charts, pie charts, and mindmaps using Mermaid syntax.
  • Multiple Output Formats: Supports both SVG for high-quality vector graphics and ASCII for terminal display.
  • Use Case: When documenting a new software architecture, use this Skill to generate an SVG flowchart from a Mermaid description, making the design easily understandable.

Quick Start

Use the diagram skill to render the following flowchart as an SVG: graph TD; A-->B; B-->C.

Frequently Asked Questions about diagram

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

FAQPage Schema
How do I generate an SVG flowchart from Mermaid syntax?▼

You can generate an SVG flowchart by providing your text-based Mermaid syntax directly to the diagram tool, which renders the graph description into a high-quality SVG vector graphic for documentation.

What types of diagrams can I create using Mermaid syntax?▼

Using Mermaid syntax, you can create flowcharts, sequence diagrams, ERDs, class diagrams, state diagrams, Gantt charts, pie charts, and mindmaps to visualize software architecture and data structures.

Can I output ASCII diagrams for terminal display instead of SVG?▼

Yes, you can output ASCII diagrams for terminal display instead of SVG, as the diagram tool supports both SVG for high-quality vector graphics and ASCII text formats to meet different visualization needs.

Do I need a specific rendering tool to visualize Mermaid diagrams?▼

Yes, visualizing Mermaid diagrams requires the builtin diagram_render tool to process the syntax and generate the final SVG or ASCII output formats for your software documentation.

Is there a way to automate diagram creation for software documentation without manual drawing?▼

You can automate diagram creation for software documentation by converting text-based descriptions directly into visual diagrams using Mermaid syntax, eliminating the need for manual drawing tools.

Related Skills

Explore More Software Engineering Skills→
diegocanepadiegocanepa

mermaid-diagrams

Generate flowcharts, sequence diagrams, and class diagrams from Mermaid syntax.

Community
Basic
Umbral-BotUmbral-Bot

svgwrite

Generate editable SVG files programmatically with the svgwrite Python library.

Official
Intermediate
vathymutvathymut

mermaid-diagram-specialist

Create flowcharts, sequence diagrams, ERDs, and C4 architecture diagrams from text.

Community
Intermediate
cameronraysmithcameronraysmith
14

text-to-visual-iteration

Compile text-based visual specifications into SVG, PNG, and PDF outputs.

Community
Advanced