Agentic MermaidAboutExamplesComparisonsDocsGitHubOpen editor

Custom styles are plain JSON files passed to --style. Keep them in source control, add a seed when the style uses sketch variation, and validate the file before using it from an untrusted source.

am render diagram.mmd --format png --style examples/styles/transit-route-map.style.json --seed 11 --output diagram.png

Use the public schema at /schemas/style-spec.schema.json. The same file is exported from the npm package as agentic-mermaid/style-spec.schema.json, so editors can map either the hosted URL or the package export.

Cookbook examples

The package ships complete JSON files under examples/styles/. These three examples cover the uncovered clusters that work with the current StyleSpec: route-map semantics, retro editorial palettes, and page/backdrop treatments.

Transit route map custom style screenshot
transit-route-map.style.json stresses thick connectors, rounded bends, compact station labels, and group labels.
Mid-century report custom style screenshot
mid-century-report.style.json uses palette, solid fills, typography, corners, and section bands without a custom renderer.
Star chart atlas custom style screenshot
star-chart-atlas.style.json tests dark-page tokens, grid backdrop, pale strokes, and serif labels.

Validation

The schema catches file shape in editors. Runtime code should still call validateStyleSpec(json); the CLI does this for .json files passed through --style.


Docs index