$npx skillfedfor your agent

Mermaid Skill

Create professional diagrams from simple text syntax and export to multiple formats without manual positioning. Supports flowcharts, sequence diagrams, class diagrams, ER schemas, state machines, and more—run locally with mmdc or instantly via Kroki API.

Mermaid Skill generates text-based diagrams and exports them to PNG, SVG, or PDF using local tools or cloud APIs.

AI-generated summary based on this skill's SKILL.md

24 4 unlicensed, metadata onlyupdated by Agents365-ai

Decision gist · record as of 2026-07-27

Mermaid Skill generates text-based diagrams and exports them to PNG, SVG, or PDF using local tools or cloud APIs. Create professional diagrams from simple text syntax and export to multiple formats without manual positioning. Supports flowcharts, sequence diagrams, class diagrams, ER schemas, state machines, and more—run locally with mmdc or instantly via Kroki API.

manual: git clone https://github.com/Agents365-ai/365-skills → cp -r 365-skills ~/.claude/skills/mermaid-skill

Use it when

  • Mermaid Skill lets you build flowcharts by writing text-based syntax that defines nodes and connections.
  • Yes.
Same gist for agents: .md · .json

Install

Agents365-ai/365-skills/mermaid-skill · repository language: Python

generated, unverified - the skill's exact subdirectory could not be determined; check the repository on GitHub

Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.

Frequently asked questions

AI-generated answers based on this skill's SKILL.md and metadata

What diagram types does Mermaid Skill support?

Mermaid Skill enables you to create flowcharts, sequence diagrams, class diagrams, ER schemas, state machines, Gantt charts, and pie charts from simple text syntax. Each diagram type uses its own declarative format, letting you define structure and relationships without manual positioning. The skill handles rendering across all supported chart types.

How do I create a flowchart with mermaid?

Mermaid Skill lets you build flowcharts by writing text-based syntax that defines nodes and connections. You specify node shapes, labels, and arrow directions using simple notation—for example, `A --> B` creates a connection from node A to node B. Mermaid Skill then renders the complete flowchart automatically without requiring manual layout work.

Can Mermaid Skill help me learn mermaid syntax?

Yes. Mermaid Skill provides guidance on mermaid diagram syntax and best practices, covering flowchart notation, sequence diagram formatting, class diagram structure, and more. The skill can explain syntax rules, show examples for each diagram type, and help you troubleshoot rendering issues when your diagrams don't display as expected.

What export options and rendering methods does Mermaid Skill offer?

Mermaid Skill supports multiple deployment approaches: run the mermaid CLI (mmdc) locally for offline rendering, or use the Kroki API for instant cloud-based diagram generation. Both methods export to standard formats, allowing you to embed diagrams in documentation, presentations, or web applications without manual positioning.

How can Mermaid Skill convert documentation into visual diagrams?

Mermaid Skill transforms written documentation into visual diagrams by translating descriptive text into mermaid syntax. You describe your process, system architecture, or workflow in natural language, and Mermaid Skill converts it into the appropriate diagram type—flowchart, sequence diagram, ER schema, or state machine—ready for rendering and export.

Does Mermaid Skill include a visual editor or diagram converter?

Mermaid Skill provides text-based syntax guidance and conversion capabilities rather than a built-in visual editor. However, it can help you generate mermaid code from descriptions and convert between documentation formats and diagram syntax. You can then use external mermaid editors or the Kroki API to preview and refine your diagrams interactively.

Let your AI agent find skills like this

Example. Real query, live index.

You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.

wish › “Create and visualize flowcharts, sequence diagrams, and other chart types”

Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →

Related skills

Plantuml Skill
by Agents365-ai · Agents365-ai/365-skills

PlantUML Skill creates sequence, class, component, ER, and other UML diagrams from text descriptions, exporting to PNG or SVG through the Kroki rendering API. It requires only curl and works across macOS, Linux, and Windows, with optional local Docker or PlantUML jar backends for offline use.

no license declared → metadata onlyupdated Jul 2026
★ 24repo stars
Mermaidjs V11
by mrgoonie · mrgoonie/claudekit-skills

Mermaidjs V11 lets you create technical diagrams from declarative text syntax, rendering to SVG, PNG, or PDF. It covers flowcharts, sequence diagrams, class diagrams, state machines, ER diagrams, Gantt charts, and more—ideal for documentation, architecture planning, and system visualization. Use it inline in markdown, via CLI, or embedded in JavaScript applications with theme and configuration support.

no license declared → metadata onlyfor claude-codeupdated Apr 2026
★ 2,186repo stars
creating-mermaid-diagrams
by narumiruna · narumiruna/skills

Create and validate Mermaid diagrams across multiple types—flowcharts for processes, sequence diagrams for system interactions, class and state diagrams for object models and lifecycles, ER diagrams for data relationships, and other specialized formats like Gantt charts. The skill preserves editable source while optionally rendering static SVG assets when needed for documents or slides.

MITupdated Jul 2026
★ 8repo stars
Mermaid To Gif
by zc277584121 · zc277584121/marketing-skills

Mermaid to GIF transforms Mermaid diagram code into animated GIF files with four distinct animation styles tailored to different diagram types. Extract diagrams from .mmd files or markdown code blocks, then customize animation, theme, and rendering options to suit your presentation or documentation needs.

no license declared → metadata onlyupdated Jul 2026
★ 0repo stars
Exporting To Png
by spencerpauly · spencerpauly/awesome-cursor-skills

Convert various content types—code snippets, Markdown, diagrams, and rendered components—into PNG images. The skill supports multiple rendering approaches including headless browser capture, specialized CLI tools, and format-specific converters for flexibility across different source materials.

no license declared → metadata onlyupdated Apr 2026
★ 625repo stars
mermaid-graph-renderer
by curiositech · curiositech/some_claude_skills

Convert Mermaid diagrams to production-ready SVG, PNG, or PDF across web and offline contexts. Choose lazy-loaded client-side rendering for documentation sites, mermaid-cli for small batches, or the native Rust renderer for high-volume CI/CD pipelines. Handles performance optimization, theme customization, and multi-format output.

MITfor claude-codeupdated Jul 2026
★ 164repo stars

More skills Mermaid Builder (NOASSERTION) · Mermaid Studio (NOASSERTION) · moai-domain-svg-infographic (Apache-2.0) · Excalidraw Skill (unlicensed) · Beautiful Mermaid Ascii (unlicensed) · pretty-mermaid (MIT) · Aris Mermaid Diagram (NOASSERTION)

Tags
diagram-generationflowchart-buildervisualization-toolmarkdown-graphicssyntax-based-charting