Skip to content

Mermaid Slides: Instantly Turn Your Mermaid Diagrams into Interactive Presentations

I created Mermaid-Slides.com to solve a common developer pain: transforming the Mermaid diagrams in your Markdown files into interactive, beautiful presentations - instantly, with zero configuration, and without ever sending your data to external servers. Just paste your Markdown, and you’re ready to present.

The Problem: Static Diagrams, Clunky Presentations

As developers, we use Mermaid diagrams for docs, architecture, and process flows. But when it’s time to present, we’re stuck with static images or awkward workarounds. How do you turn those diagrams into engaging, navigable presentations - without losing the simplicity and portability of Markdown?

graph TD
    A[Markdown File] --> B[Static Mermaid Diagram]
    B --> C[Documentation]
    C -.-> D[No Easy Way to Present]

The Solution: Interactive Slides in Seconds

That’s why I built Mermaid Slides. Just drop in your Markdown file with Mermaid diagrams, and you’ll get a fully interactive slide deck - navigable with keyboard shortcuts or mouse clicks, ready to present anywhere.

graph TD
    A([Markdown File<br/>.md with Mermaid diagrams])
      -- "Upload / Paste" -->
    B{{"<b style='color:#2563eb;font-size:18px;'>Mermaid-Slides.com</b><br/><span style='color:#60a5fa;'>Instant Slide Generator</span>"}}
    B -- "Transforms to" --> C([<b style='color:#059669;'>Interactive Slide Deck</b>])
    C -- "Keyboard Navigation" --> D[Present Anywhere]
    C -- "Mouse Click Navigation" --> D
    style B fill:#e0e7ff,stroke:#2563eb,stroke-width:3px
    style C fill:#d1fae5,stroke:#059669,stroke-width:2px
    style A fill:#fef9c3,stroke:#f59e42,stroke-width:2px

Try Mermaid Slides Your Way

Choose the workflow that fits you best:

  1. Web App: Try it instantly - just paste your Markdown and go. No setup needed.
  2. Offline Package: Download the latest release and run it locally for full privacy.
  3. Docker:
  4. Pull: docker pull kunalpathak13/mermaid-slides
  5. Run: docker run -p 3000:3000 kunalpathak13/mermaid-slides

Open Source & Built for Developers

Curious how it works? The project is open source (MIT) and available on GitHub: kanad13/mermaid-slides.

Under the Hood

Modern Stack

  • React 19 for UI
  • TypeScript for safety
  • Vite for fast builds
  • Tailwind CSS for responsive design

Modular, Custom Hook Architecture

Each part of the experience is handled by a dedicated React hook:

graph LR
subgraph "Custom Hooks Ecosystem"
A[useMermaid] --> B[Diagram Rendering]
C[useFileHandler] --> D[File Operations]
E[useViewerNavigation] --> F[Slide Navigation]
G[useKeyboardNavigation] --> H[Keyboard Controls]
I[useDiagramParser] --> J[Content Parsing]
K[useLayoutCalculations] --> L[Responsive Layout]
M[useAutoHide] --> N[UI State Management]
end

    style A fill:#e3f2fd
    style C fill:#e3f2fd
    style E fill:#e3f2fd
    style G fill:#e3f2fd
    style I fill:#e3f2fd
    style K fill:#e3f2fd
    style M fill:#e3f2fd

Privacy-First by Design

Your content never leaves your device.

  • Local Processing: All rendering and parsing happens in your browser.
  • No External Calls: Mermaid.js is bundled locally - no CDN dependencies.
  • Zero Data Collection: No analytics, no tracking, fully offline capable.
sequenceDiagram
participant User
participant Browser
participant LocalApp
participant MermaidEngine

    User->>Browser: Upload/Paste Markdown
    Browser->>LocalApp: Process Content Locally
    LocalApp->>MermaidEngine: Render Diagrams (Client-Side)
    MermaidEngine->>LocalApp: Return SVG Diagrams
    LocalApp->>Browser: Display Slides

    Note over User,MermaidEngine: 🔒 No data leaves the device
    Note over LocalApp: All processing happens locally
    Note over MermaidEngine: Bundled, no external calls

Feedback & Contributions Welcome!

I’d love to hear your thoughts, suggestions, or feature requests. Give it a try and let me know what you think!