skills.rest
Avihai-H
Avihai-HCOMMUNITY
Explore all skills by this author →
GitHub

mermaid

Generate Mermaid diagrams inline within markdown documents.

Updated Apr 19, 2026
Search Tags:#markdown#Mermaid#diagram generation#visual documentation#inline diagrams
One-click install
npx skills add https://github.com/Avihai-H/infraops --skill mermaid-avihai-h
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mermaid
Source: https://github.com/Avihai-H/infraops/tree/main/.github/skills/mermaid
Command: npx skills add https://github.com/Avihai-H/infraops --skill mermaid-avihai-h

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill allows users to generate inline diagrams within markdown documents, enhancing documentation and runbooks with visual representations.

Core Features & Use Cases

  • Inline Diagrams: Embed flowcharts, sequence diagrams, Gantt charts, and more directly into markdown.
  • Syntax Reference: Offers examples and syntax for creating various diagram types.
  • Theming: Supports dark mode compatibility with theme directives.
  • Node Styling: Allows for consistent styling of nodes using classDef.
  • Azure Resource Visualization: Integrates with the azure-resource-visualizer skill for visualizing Azure resource relationships.
  • Astro/Starlight Integration: Renders Mermaid diagrams client-side for better integration with markdown-based platforms.
  • Guardrails: Provides guidelines on best practices and what not to use with Mermaid.

Quick Start

Use the mermaid skill to generate a flowchart in your markdown document by typing ```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 generate inline diagrams in markdown documents?▼

You can generate inline diagrams in markdown by using Mermaid syntax within code blocks to visually represent data flow, sequences, and other diagrammatic content directly in your documentation.

Can I use Mermaid diagrams with Astro or Starlight platforms?▼

Yes, Mermaid diagrams can be rendered client-side for better integration with Astro and Starlight, allowing you to embed flowcharts and sequence diagrams natively in markdown-based platforms.

Do I need the Mermaid library to create flowcharts in markdown?▼

Yes, the Mermaid library is required to create flowcharts in markdown, providing the necessary syntax reference and rendering engine for various diagram types like Gantt charts and sequences.

What diagram types are supported for visual documentation?▼

Visual documentation supports diagram types including flowcharts, sequence diagrams, Gantt charts, and other diagrammatic content, with options for node styling using classDef and dark mode theming.

Are there limitations or guardrails for Mermaid syntax I should know?▼

Mermaid provides guardrails with guidelines on best practices and what not to use, ensuring consistent node styling with classDef and avoiding unsupported syntax when creating diagrams.

How do I visualize Azure resource relationships in markdown?▼

Visualize Azure resource relationships by integrating the Mermaid skill with the azure-resource-visualizer skill, generating inline diagrams that map resource connections within markdown documents.

Related Skills

Explore More Product & Management Skills→
musingfoxmusingfox
2

doc-render-beauty

Convert Markdown documents into HTML pages with pre-rendered Mermaid diagrams.

Community
Advanced
modu-aimodu-ai
1.2k

moai-library-mermaid

Render Mermaid diagrams to SVG or PNG via MCP Playwright.

Official
Advanced
cassm199-mitacassm199-mita

azure-resource-visualizer

Analyze Azure resource groups and generate Mermaid diagrams of resource relationships.

Community
Advanced
galeepgaleep

markdown-mermaid-writing

Create scientific documentation with Markdown and Mermaid diagrams.

Community
Advanced