skills.rest
yoanbernabeu
yoanbernabeuCOMMUNITY
Explore all skills by this author →
Website𝕏@yOyO38GitHub

slidev-mermaid

Render Mermaid diagrams from syntax blocks inside Slidev presentations.

34|1|Updated Jan 25, 2026
Search Tags:#mermaid#sequence#diagrams#flowcharts#slidev#diagram-rendering#class-diagrams
One-click install
npx skills add https://github.com/yoanbernabeu/slidev-skills --skill slidev-mermaid
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: slidev-mermaid
Source: https://github.com/yoanbernabeu/slidev-skills/tree/main/skills/visuals/slidev-mermaid
Command: npx skills add https://github.com/yoanbernabeu/slidev-skills --skill slidev-mermaid

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill enables designers and developers to render Mermaid diagrams directly inside Slidev presentations, eliminating the need for external diagram tools and manual drawings.

Core Features & Use Cases

  • Mermaid syntax blocks render flowcharts, sequence diagrams, class diagrams, state diagrams, and more within Slidev slides.
  • Use cases include visualizing architecture, workflows, timelines, and educational content in a unified slide deck.
  • Quick scenario: embed a Mermaid diagram block in a Slidev slide to illustrate a simple process flow or data model.

Quick Start

Create and display Mermaid diagrams by adding Mermaid-formatted code blocks to your Slidev slides.

Frequently Asked Questions about slidev-mermaid

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

FAQPage Schema
How do I render Mermaid diagrams in Slidev presentations?▼

You can render Mermaid diagrams in Slidev by adding Mermaid-formatted code blocks directly to your slides, supporting flowcharts, sequence diagrams, and class diagrams without external tooling.

Can I use Slidev to visualize architecture reviews with Mermaid syntax?▼

Slidev supports visualizing architecture reviews and workflows by embedding Mermaid syntax blocks that render directly inside the presentation slides for documentation purposes.

Do I need external diagram tools to display flowcharts in Slidev?▼

No external diagram tools are required to display flowcharts in Slidev, as diagrams render directly from plain Mermaid code blocks with optional Mermaid configuration.

What diagram types are supported by Mermaid blocks in Slidev?▼

Mermaid blocks in Slidev support flowcharts, sequence diagrams, class diagrams, state diagrams, and other types for educational slides, timelines, and data models.

Does Slidev support optional Mermaid configuration for diagram rendering?▼

Slidev supports optional Mermaid configuration alongside plain Mermaid syntax blocks, allowing you to customize how diagrams render within your presentation slides.

Related Skills

Explore More Design & Creative Skills→
szeyuszeyu
5

slidev-mermaid

Embed Mermaid diagrams in Slidev presentations using standard syntax blocks.

Community
Intermediate
kaovilaikaovilai

slidev

Create and manage developer presentations with Slidev using Markdown and export to PDF, PPTX, or PNG.

Community
Intermediate
claude-office-skillsclaude-office-skills
368

dev-slides

Generate Slidev presentations with Markdown, Monaco Editor, Mermaid, and Vue components.

Official
Intermediate
shekerkammashekerkamma

diagram-export

Convert Mermaid, PlantUML, Graphviz, draw.io, and Vega diagrams to PNG/SVG/PDF.

Community
Intermediate