skills.rest
szeyu
szeyuCOMMUNITY
Explore all skills by this author →
GitHub

slidev-mermaid

Embed Mermaid diagrams in Slidev presentations using standard syntax blocks.

5|Updated Feb 4, 2026
Search Tags:#mermaid#flowchart#presentation#sequence#diagrams#slidev#class-diagram
One-click install
npx skills add https://github.com/szeyu/open-ssyok-finance --skill slidev-mermaid-szeyu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: slidev-mermaid
Source: https://github.com/szeyu/open-ssyok-finance/tree/main/.agents/skills/slidev-mermaid
Command: npx skills add https://github.com/szeyu/open-ssyok-finance --skill slidev-mermaid-szeyu

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Slidev users often struggle to add technical diagrams to presentations without switching tools. This skill provides a seamless way to render Mermaid diagrams directly inside Slidev slides, keeping diagrams in the same markdown-based workflow.

Core Features & Use Cases

  • Supports standard Mermaid syntax blocks inside Slidev slides for flowcharts, sequences, class diagrams, and more.
  • Helps visualize architecture, data flows, and system relationships within presentations.
  • Suitable for design reviews, technical demos, and classroom tutorials where diagrams assist explanations.

Quick Start

Insert a mermaid code block in a Slidev slide using mermaid and render the presentation to view the diagram.

Frequently Asked Questions about slidev-mermaid

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

FAQPage Schema
How do I add Mermaid diagrams to a Slidev presentation?▼

Slidev renders Mermaid diagrams by inserting standard Mermaid syntax code blocks directly into Slidev slides, utilizing built-in integration to visualize flowcharts and architecture diagrams during presentation.

Can I use sequence and class diagrams in Slidev?▼

Slidev supports embedding sequence diagrams, class diagrams, flowcharts, and architecture diagrams by inserting standard Mermaid syntax blocks into slides, rendering them visually via built-in integration.

What is the best way to visualize architecture in Slidev without switching tools?▼

Using Mermaid syntax blocks in Slidev visualizes architecture directly within markdown-based slides, avoiding tool switching and keeping data flows and system relationships in the same workflow.

Does Slidev support rendering Mermaid syntax natively?▼

Slidev natively supports rendering Mermaid syntax through built-in integration, allowing users to insert code blocks and render flowcharts, sequences, and class diagrams directly in slides.

When should I use Mermaid diagrams in Slidev presentations?▼

Use Mermaid diagrams in Slidev for design reviews, technical demos, and classroom tutorials to visualize complex data flows and system relationships, seamlessly assisting explanations within markdown slides.

Related Skills

Explore More Design & Creative Skills→
yoanbernabeuyoanbernabeu
34

slidev-mermaid

Render Mermaid diagrams from syntax blocks inside Slidev presentations.

Community
Basic
hmzainjamilhmzainjamil
1

dev-slides

Generate Slidev markdown presentations with code examples, diagrams, and Vue components.

Community
Intermediate
rhussrhuss
49

Slidev Mastery

Create Slidev presentations from Markdown with layouts, themes, and Monaco live coding.

Community
Advanced
AvaivartikaAvaivartika
1

mermaid

Render Mermaid diagrams from Mermaid syntax to SVG or ASCII.

Community
Intermediate