mermaid

Generate inline Mermaid diagrams in markdown documents.

6|2|Updated Jan 29, 2026
One-click install
npx skills add https://github.com/jonathan-vella/azure-smb-rf --skill mermaid-jonathan-vella
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: mermaid
Source: https://github.com/jonathan-vella/azure-smb-rf/tree/main/.github/skills/mermaid
Command: npx skills add https://github.com/jonathan-vella/azure-smb-rf --skill mermaid-jonathan-vella

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill solves the problem of creating complex diagrams within markdown documents, such as flowcharts, sequence diagrams, Gantt charts, and ER diagrams, without the need for external tools or software.

Core Features & Use Cases

  • Inline Diagrams: Embed diagrams directly within markdown files for seamless documentation.
  • Diagram Types: Supports a wide range of diagram types including flowcharts, sequence diagrams, Gantt charts, state diagrams, ER diagrams, and more.
  • Azure Resource Visualization: Integrates with Azure Resource Graph to visualize live Azure resource groups as Mermaid diagrams.
  • Astro/Starlight Integration: Allows for client-side rendering of Mermaid diagrams in projects using Astro or Starlight frameworks.
  • Theming & Styling: Offers theming options for dark mode compatibility and node styling for consistent visualization.

Quick Start

Use the mermaid skill to add a flowchart to your markdown file: mermaid graph LR 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 inline diagrams in markdown documentation?

You can create inline diagrams in markdown by using code fences labeled with the mermaid language. This approach parses the text to generate flowcharts, sequence diagrams, and ER diagrams directly within your technical documentation files without needing external tools.

Can I visualize Azure resource groups as Mermaid diagrams?

Yes, you can visualize Azure resource groups as Mermaid diagrams. The tool integrates with Azure Resource Graph to query live resources and automatically generate markdown code fences representing your current infrastructure topology visually.

Does Mermaid support client-side rendering for Astro or Starlight projects?

Yes, Mermaid supports client-side rendering for Astro and Starlight frameworks. You can embed markdown code fences within your project files, allowing the diagrams to render dynamically on the client side for dark mode compatibility and theming.

What types of technical diagrams can I generate using markdown code fences?

Using markdown code fences, you can generate flowcharts, sequence diagrams, Gantt charts, state diagrams, and ER diagrams. These inline visualizations are highly suitable for technical documentation, process runbooks, and code reviews.

Do I need external software to add flowcharts to my markdown files?

No, you do not need external software to add flowcharts to markdown files. By requiring only Mermaid to parse the markdown code fences, you can generate complex diagrams directly inline during your standard documentation writing workflow.