skills.rest
roycolumbia-code
roycolumbia-codeCOMMUNITY
Explore all skills by this author →
GitHub

mermaid

Create and edit Mermaid diagrams via a command-line interface.

Updated Mar 23, 2026
Search Tags:#png#mermaid#cli#diagramming#svg#diagram editor
One-click install
npx skills add https://github.com/roycolumbia-code/claude-global-config --skill mermaid-roycolumbia-code
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mermaid
Source: https://github.com/roycolumbia-code/claude-global-config/tree/main/skills/mermaid
Command: npx skills add https://github.com/roycolumbia-code/claude-global-config --skill mermaid-roycolumbia-code

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires mermaid, mermaid-renderer, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill streamlines the process of creating and managing Mermaid diagrams, allowing users to generate and edit diagrams directly from the command line.

Core Features & Use Cases

  • CLI Harness for Mermaid Live Editor: Provides a command-line interface to the Mermaid Live Editor, enabling users to create and modify diagrams without leaving the terminal.
  • Live Diagram Preview: Real-time preview of diagrams as they are being edited.
  • Shareable URLs: Generate URLs for sharing diagrams with others.
  • SVG and PNG Rendering: Export diagrams as SVG or PNG files.
  • Use Case: Ideal for developers and technical writers who need to create diagrams as part of their documentation or code.

Quick Start

Use the mermaid skill to create a new diagram with the following code: mermaid diagram --code 'graph TD; A --> B'.

Frequently Asked Questions about mermaid

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

FAQPage Schema
How do I create Mermaid diagrams from the command line?▼

You can generate Mermaid diagrams via the command line by using the provided CLI harness to pass diagram code to the Mermaid Live Editor, facilitating creation and editing directly within the terminal environment.

Can I export Mermaid diagrams to SVG and PNG files?▼

Yes, you can export Mermaid diagrams to SVG and PNG files. The command-line interface integrates with a Mermaid renderer service to process and save your diagrams in these specific image formats.

Does the Mermaid CLI support live diagram preview?▼

The Mermaid CLI supports live diagram preview, allowing developers and technical writers to view real-time updates of their diagrams as the code is being edited directly from the terminal.

Do I need the Mermaid Live Editor to use this command-line interface?▼

Yes, you need the Mermaid Live Editor and a Mermaid renderer service installed. The CLI acts as an interface to these dependencies, requiring them for underlying diagram processing and rendering.

What is the best way to share Mermaid diagrams generated in the terminal?▼

The best way to share Mermaid diagrams generated in the terminal is by creating shareable URLs. The CLI can automatically generate these links, allowing you to easily distribute diagrams to others.

Why use a CLI for diagramming instead of a visual diagram editor?▼

Using a CLI for diagramming streamlines the workflow for developers and technical writers. It allows you to create, manage, and export diagrams without leaving the terminal, integrating smoothly into code and documentation pipelines.

Related Skills

Explore More Software Engineering Skills→
TrevorEdrisTrevorEdris
2

mermaid-diagrams

Create Mermaid diagrams from plain text in Markdown documents.

Community
Basic
calesthiocalesthio
46.2k

beautiful-mermaid

Render Mermaid diagrams as SVG and PNG using the Beautiful Mermaid library.

Community
Intermediate
RamanEbrahimiRamanEbrahimi
3

markdown-mermaid-writing

Generate scientific documentation with Markdown and Mermaid diagrams.

Community
Advanced
yoonhwanyoonhwan
3

termaid

Render Mermaid diagram code as styled visual output in the terminal.

Community
Intermediate