17 themes in three groups
On desktop, click “Theme” above the preview; on a phone, tap “Theme” at the bottom. The panel groups the themes, and your choice is remembered.
8 are free: the 6 classic themes, hand-drawn “Paper” and modern “Gradient” export with no watermark and no sign-in (5 free exports every 24 hours). The other 9 (Crayon, Kraft, Chalkboard, Blueprint, Gradient Dark, Outline, Outline Dark, Colorful, Colorful Dark) are Pro themes and carry a small crown in the panel: anyone can pick them and preview the result, and exporting or sharing needs Pro. Without Pro you get a short note offering Pro or “Switch to … and export”, which moves to the free theme in the same group (hand-drawn to Paper, modern to Gradient), keeps your stroke, font and other settings, and exports as usual. Diagrams you saved earlier, share links and cloud diagrams that use a Pro theme open as before and get the same note on export.
Classic
| Theme | Background | Good for |
|---|---|---|
| Light | white | documents and slides, the default |
| Dark | dark grey | dark pages |
| Ink Teal | warm off-white + teal grey | papers, technical docs |
| Cinnabar | warm cream + cinnabar red | reports, slides |
| Indigo | cool white + indigo | business and product docs |
| Ink Black | deep ink + pale gold | dark settings, easy on the eyes |
Hand-drawn: sketchy lines with hatched fills and handwritten text (Excalifont for Latin script, the Xiaolai hand for Chinese), the same look as an Excalidraw whiteboard.
| Theme | Look |
|---|---|
| Paper | black ink on white, no fill |
| Crayon | light blue hatching on warm white |
| Kraft | brown ink on kraft paper |
| Chalkboard | chalk lines on a green board, good for dark slides |
| Blueprint | white lines on blue, like a technical drawing |
Modern: the newer looks that ship with Mermaid 11. Gradient (rounded nodes with gradient borders), Outline (black-and-white outlines with soft shadows) and Colorful (a color per branch, most visible in mind maps), each with a dark version.
Style: tune the whole diagram the way Excalidraw does
“Style”, next to “Theme”, controls how the whole diagram is drawn. Each setting matches one in Excalidraw's style panel:
- Sloppiness: Architect, Artist or Cartoonist. Classic themes default to Architect; pick Artist to get hand-drawn lines on Ink Teal, Indigo or any other palette. (Pro)
- Fill: Hachure, Cross-hatch or Solid. (Pro)
- Stroke width: Thin, Bold or Extra bold.
- Stroke style: Solid, Dashed or Dotted. This changes shape outlines; lines whose dashes carry meaning, such as replies in a sequence diagram, stay as they are.
- Edges: Sharp or Round.
- Font: System, Hand-drawn, Normal or Code.
- Font size: S, M or L.
Stroke width, stroke style, edges, font and font size are free. Sloppiness and fill are Pro sketch tweaks (crowned in the panel): when they differ from the theme's own defaults you can try them freely, and exporting needs Pro; switching to free resets just those two and keeps the rest.
The style belongs to the theme: it is remembered and travels in share links and cloud saves, and “Reset” goes back to the theme's own style. Switching themes switches to the new theme's own style too.
The hand-drawn look works on every diagram type, including pie charts, Gantt charts and timelines.
Custom theme color (Pro)
The last tile in the Classic group is “Custom”. One click applies a palette built from the default primary color; the panel below it lets you change it with a native color picker, a hex field, a light / dark base toggle and eight presets. Every change applies immediately; there is no “OK” button. Changing the one primary color moves node fills, borders, lines, groups, Gantt bars and mind-map branches together; a very bright primary (pure yellow, say) is darkened automatically so it stays readable on a light base, and brightened on a dark base.
A custom theme is remembered, travels in share links and is stored with cloud saves, just like the built-in ones, and it works with Style too. Switch back to a built-in theme and the “Custom” tile starts from your last color. On the free plan the tile shows a lock.
Dark mode versus diagram theme
The button in the top bar switches the page between light and dark. Until you pick a diagram theme yourself, the diagram follows the page; once you have picked one, dark mode leaves it alone.
Export backgrounds
- PNG: transparent by default, so it sits on any page without a white box; “Solid” uses the theme background.
- SVG: keeps the theme's background setting.
- Word, PowerPoint and PDF: always use the theme background (transparency is not reliable inside these files). Switch to Light or Paper first if you need white.
The preview canvas uses the same background, so what you see is what you get.
Will the handwriting show up everywhere?
With the Hand-drawn, Normal or Code font, the browser downloads only the few small font pieces your diagram needs (a few hundred KB the first time for a Chinese diagram, cached after that). In exported PNG, Word, PowerPoint and PDF files the text is part of the image; exported SVG and draw.io files carry the fonts they use, so they look the same on another computer. Offline, the diagram falls back to the system font for the moment, and rendering and export keep working.