goldmark-mermaid

goldmark-mermaid is an extension for the goldmark Markdown parser that adds support for Mermaid diagrams.

Demo: A web-based demonstration of the extension is available at https://abhinav.github.io/goldmark-mermaid/demo/.

Installation

go get go.abhg.dev/goldmark/mermaid@latest

Usage

To use goldmark-mermaid, import the mermaid package.

import "go.abhg.dev/goldmark/mermaid"

Then include the mermaid.Extender in the list of extensions you build your goldmark.Markdown with.

goldmark.New(
  goldmark.WithExtensions(
    // ...
    &mermaid.Extender{},
  ),
  // ...
).Convert(src, out)

The package supports Mermaid diagrams inside fenced code blocks with the language mermaid. For example,

```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```

When you render the Markdown as HTML, these will be rendered into diagrams.

Rendering diagrams

Mermaid diagrams can be rendered at the time the file is processed ("server-side") or in-browser when the file is viewed ("client-side").

• With server-side rendering, goldmark-mermaid calls out to the MermaidJS CLI to render SVGs inline into the document.
• With client-side rendering, goldmark-mermaid generates HTML that renders diagrams in-browser.

You can pick between the two by setting RenderMode on mermaid.Extender.

goldmark.New(
  goldmark.WithExtensions(
    &mermaid.Extender{
      RenderMode: mermaid.RenderModeServer, // or RenderModeClient
    },
  ),
  // ...
).Convert(src, out)

By default, goldmark-mermaid will pick between the two, based on whether it was able to find the mmdc executable on your $PATH.