Can I export these diagrams to image files?

Yes, the skill includes detailed guidance on using the Mermaid CLI (mmdc) to convert your text-based code into SVG, PNG, or PDF formats.

Is this skill compatible with standard Markdown editors?

Yes, Mermaid is the industry standard for many Markdown platforms like GitHub, GitLab, and Obsidian, making the generated diagrams highly portable across documentation tools.

How do I apply custom themes to my diagrams?

You can use YAML frontmatter within the mermaid code block to specify themes like 'dark', 'forest', 'neutral', or even a 'handDrawn' look for a sketch-like aesthetic.

What diagram types are supported by this skill?

It supports over 24 types, including flowcharts, sequence diagrams, Gantt charts, ER diagrams, class diagrams, state machines, and user journey maps.

Mermaid.js Diagram Creator

Name: Mermaid.js Diagram Creator
Author: GGPrompts

byGGPrompts

•

学習とドキュメンテーション

Generates professional text-based diagrams and visualizations using Mermaid.js v11 syntax for technical documentation and system architecture.

This skill empowers Claude to create, configure, and render over 24 different types of diagrams using the declarative Mermaid.js v11 syntax. Whether you need to visualize complex system architectures, map out database relationships, or track project timelines, it provides a standardized framework for converting text descriptions into high-quality visual assets. It supports advanced features like theming, CLI-based image exporting, and seamless integration into Markdown files or web applications, making it essential for developers and architects who prioritize documentation-as-code.

主な機能

01Enables CLI rendering to SVG, PNG, and PDF formats for automated workflows

02Supports 24+ diagram types including flowcharts, sequence diagrams, and ERDs

031 GitHub stars

04Offers comprehensive theming and customization options including hand-drawn looks

05Includes accessibility features and frontmatter configuration for precise control

06Provides JavaScript API integration patterns for web application embedding

ユースケース

01Creating project Gantt charts and user journey maps for presentations

02Visualizing complex database schemas and entity-relationship models

03Documenting software architecture and API flows within code repositories

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add ggprompts/my-plugins mermaidjs-v11

For use in Claude.ai and ChatGPT

Download Skill