Index

mermoid parses Mermaid diagram syntax and renders SVG in Scala 3, on the JVM and in the browser via Scala.js. No headless Chrome, no Node build step, no JavaScript at page load.

The output is styled entirely by CSS. Every element carries a stable class and id (node-Start, edge-a-b-0, note-Idle-0), and the stylesheet ships in a <style> block built from CSS custom properties, so you restyle a diagram with a stylesheet instead of re-rendering it. Four built-in themes, or bring your own CSS.

SvgRenderer.render gives you a String; SvgRenderer.renderTree / DiagramLayout.scene are the paint-agnostic contracts. mermoid-ascent paints hybrid HTML+SVG with reactive reflow for Specular and any ascent app.

fastparse is the only dependency of mermoid core; mermoid-ascent adds ascent.

Guide: Quick start → Flowcharts → State diagrams → Interactive → Theming → Custom CSS → SVG structure → CLI.

libraryDependencies += "rocks.earlyeffect" %% "mermoid" % "0.0.3"

// the same artifact cross-builds for Scala.js
libraryDependencies += "rocks.earlyeffect" %%% "mermoid" % "0.0.3-ci"

libraryDependencies += "rocks.earlyeffect" %% "mermoid-ascent" % "0.0.3-ci"
libraryDependencies += "rocks.earlyeffect" %%% "mermoid-ascent" % "0.0.3-ci"

import mermoid.*

val svg = MermaidParser.parse("flowchart TD\\n  A[Start] --> B[Done]")
  .map(SvgRenderer.render(_))