Mermaid OnlineTools
Mermaid export style gallery

Choose the Mermaid style before you export

Compare publish-ready Mermaid themes for docs, README files, dark knowledge bases, slides, blogs, and hand-drawn whiteboard explainers. The goal is not decoration — it is choosing the right export surface before downloading.

Theme examples

Each card uses the Mermaid type that best sells that preset, so the gallery feels like real export examples instead of repeated thumbnails.

8 presets
Clean Docspreview
WritePreviewExportDocs

Clean Docs

Best for documentation.

A crisp white canvas for technical docs and wiki pages.

GitHub READMEpreview
DraftReviewExportShareRelease diagram

GitHub README

Best for README files.

GitHub-blue node styling that blends into README pages.

Warm Editorialpreview
ThemeDocsSlidesDarkBlogs

Warm Editorial

Best for editorial posts and long-form docs.

Warm amber canvas for editorial posts, decks, and long-form docs.

Sketch Paperpreview
ClientServicerequestresponse

Whiteboard Sketch

Best for workshops and architecture notes.

Hand-drawn roughjs geometry on warm paper for explainers.

Transparent Docspreview
Exporter+ format+ download()Theme+ preset()

Transparent Docs

Best for slides and README files.

Checkerboard preview for transparent PNG/SVG exports.

Dark exportpreview
USEREXPORTid · emailformat · scalecreates

GitHub Dark

Best for dark docs.

Navy code-document styling with readable light labels.

Slide exportpreview
FastPolishedImpact vs effort

Slide Dark

Best for slides and decks.

Dark presentation canvas with amber accents and large margins.

Deep Oceanpreview
Project rolloutPlanBuildQAShip

Deep Ocean

Best for dark decks with cool accents.

Cool indigo-blue dark theme with bright cyan accents.

How to choose a style

Docs and wikis

Start with Clean Docs or GitHub README when the diagram needs to disappear into documentation.

Workshops and explainers

Use Whiteboard Sketch when the diagram is part of a narrative, workshop board, or architecture walkthrough.

Dark surfaces

Use GitHub Dark for dark docs, Deep Ocean for product decks with cool accents, or Slide Dark for warmer amber accents.

Slides and articles

Use Slide Dark or Warm Editorial for decks and long-form posts, or Transparent Docs when the export must sit on any background.