Transform your markdown content with mermaid diagrams and images into beautiful presentation slides with advanced navigation and theming.
Visit Mermaid Slides and start creating presentations immediately.
Run Mermaid Slides in a Docker container for easy deployment:
# Pull and run the latest version
docker pull kunalpathak13/mermaid-slides:latest
docker run -p 3000:3000 kunalpathak13/mermaid-slides:latest
# Open browser to http://localhost:3000- Container Ready: Multi-platform support (AMD64, ARM64)
- Isolated Environment: Complete containerized solution
- Easy Deployment: Perfect for corporate environments
Download the complete offline package for local use without internet dependency:
# Download from GitHub Releases
# Visit: https://github.com/kanad13/mermaid-slides/releases/latest
# Extract and run:
unzip mermaid-slides-offline-v*.zip
cd mermaid-slides-offline
# Choose your preferred server:
python3 start-server.py # Python option
node start-server.js # Node.js option
./start-server.sh # Auto-detect (macOS/Linux)
start-server.bat # Auto-detect (Windows)
# Open browser to http://localhost:3000git clone https://github.com/kanad13/mermaid-slides.git
cd mermaid-slides
npm install
npm run devImportant Notice: This is an independent, community-driven project and is not an official product of the Mermaid.js team. Mermaid Slides (this project) is built with deep gratitude to the Mermaid.js creators and uses their library under the MIT License. All credit for the core diagramming functionality goes to the Mermaid.js project.
- File Handling - Drag & drop, file browser, or paste markdown content
- Mixed Content - Mermaid diagrams + images in unified presentations
- Title Extraction - Automatically extracts markdown headers as slide titles with user toggle
- Navigation - Keyboard controls, progress bar, grid view, thumbnails
- Settings Panel - Customize title display, auto-hide behavior, and user preferences
- Presentation Mode - Full-screen, distraction-free experience
- Responsive - Works on desktop, tablet, and mobile devices
- Zero Tracking - No analytics, telemetry, or data collection
- Offline First - Complete functionality without internet dependency
- Local Processing - All diagram rendering happens on your device
- Self-Contained - All distributions bundle dependencies locally
- Privacy Modals - Built-in privacy policy and legal notice information
- Web App - Instant access via GitHub Pages
- Offline Package - Download and run locally on any OS
- Docker Container - Containerized deployment for any environment
- VS Code Extension - Planned for integrated markdown workflow
- Tab Integration - Preview button will appear automatically on markdown file tabs
- One-Click Preview - Transform any markdown file with mermaid diagrams into presentations
- Auto-Detection - Automatically identify mermaid diagrams in your files
- Privacy-First - Zero internet communication, all processing happens locally
- Open any markdown file containing mermaid diagrams
- Click the "Preview Mermaid Slides" button in the tab bar
- Side preview opens with all diagrams ready for presentation
- Use arrow keys or controls to navigate through slides
# Will be available on VS Code Marketplace
# Search for "Mermaid Slides" in VS Code Extensions
# Also available as VSIX download from GitHub Releases
# Install via: Extensions ... Install from VSIXStatus: Currently planned for future development. Follow the repository for updates!
Mermaid Slides is designed with privacy as a core principle:
- No Data Collection - Zero analytics, tracking, or telemetry
- Offline Operation - Full functionality without internet connection
- Local Processing - All diagram rendering happens on your device
- Self-Contained - No external CDN dependencies in any distribution
- Minimal Permissions - Planned VS Code extension will only read active editor content
- No External Requests - All distributions make zero network calls during operation
- Architecture Strategy - Multi-channel architecture and development strategy
- Distribution Guide - Complete distribution process for all channels
- Contributing Guide - Development setup and contribution guidelines
- Complete Documentation - Full guides and feature details
- Features Overview - Comprehensive feature list
- Testing & Deployment - Testing and deployment guides
- VS Code Testing Guide - VS Code extension testing
- Development Setup - Developer workflow and instructions
- Contributing - How to contribute to the project
Frontend: React 19 + TypeScript | Build: Vite 7.0 | Styling: Tailwind CSS 3.4 Diagrams: Mermaid.js 11.7 | Testing: Vitest + React Testing Library | Deployment: GitHub Pages
Mermaid Diagrams: Flowcharts, Sequence, ER, Class, State, Gantt, Pie Charts, Git Graphs Images: PNG, JPEG, GIF, WebP with automatic scaling and responsive display
We welcome contributions! See our Contributing Guidelines for development setup and guidelines.
MIT License - see LICENSE for details.
Mermaid Slides is built with and redistributes the following open source projects. I am grateful for their contributions to the community:
- Mermaid.js (MIT License) — Copyright (c) Knut Sveidqvist The core diagramming engine that makes this project possible
- React (MIT License) — Copyright (c) Meta Platforms, Inc. The foundation for our modern, interactive user interface
- Vite (MIT License) — Copyright (c) Evan You Lightning-fast development and build tooling
- Tailwind CSS (MIT License) — Copyright (c) Tailwind Labs, Inc. Utility-first CSS framework for rapid UI development
- TypeScript (Apache-2.0 License) — Copyright (c) Microsoft Corporation Type safety and developer experience enhancements
See package.json for a complete list of all dependencies.
Special thanks to the Mermaid.js team for creating such a powerful and flexible diagramming library that enables developers to create beautiful diagrams with simple text syntax.