Mermaid

```mermaid
flowchart LR
  bread[Bread crumbs] --> ducks
  bread --> pigeons
  ducks --> pond[The pond]
```

```mermaid
sequenceDiagram
  Agent->>Reviewer: Opens a PR with evidence
  Reviewer-->>Agent: Asks for a change
  Agent->>Reviewer: Pushes the fix
```

```mermaid
pie title Birds at the pond
  "Ducks": 12
  "Pigeons": 7
  "Geese": 3
```

A diagram in a review shows a flow or a schema faster than prose, and Mermaid is the syntax agents and GitHub already write. comark-pele turns each mermaid fence into SVG with Pele, a Mermaid renderer with no dependencies, so the page needs no script and the diagram's source never leaves your machine.

comark-pele is a third-party plugin, by farnabaz, not one of this repository's packages. comark-ui registers it for you and puts its diagrams on the shared tokens, so they match the other blocks in light and dark.

A ```mermaid or ```pele fence becomes a diagram. Every other fence stays code. Pass languages to change which ones:

pele({ languages: ["mermaid"] }); // only `mermaid` fences, not `pele` ones

Props after the language go on the diagram's wrapper, so a class or an id reaches your styles and links:

```mermaid {.wide #checkout}
flowchart LR
  cart --> pay --> done
```

Pele draws every diagram type built into Mermaid 12.1.0, picked by the first word of the diagram as in Mermaid:

Mermaid settings, such as a diagram's own theme, go in the diagram, in its frontmatter or a %%{init}%% directive.

A diagram Pele can't draw shows its source as code, with Pele's error in the wrapper's data-error attribute. Nothing goes in meta.issues, so check a diagram in the playground before you publish it.

In comarkUi(), the mermaid option takes comark-pele's options, or false to leave mermaid fences as code. Getting started says when turning it off is worth it.

comark-ui brings comark-pele and registers it. To use it alone, install it:

pnpm add comark @comark/html comark-pele

Register its plugin and pass its Pele component:

import { createHtmlRenderer } from "@comark/html";
import pele, { Pele } from "comark-pele/html";

const render = createHtmlRenderer({ plugins: [pele()], components: { Pele } });

The HTML renderer puts static SVG in the page, so it needs no script, no browser, and no network, in Node or in a Cloudflare Worker. For Vue, React, or Svelte, import from comark-pele/vue, comark-pele/react, or comark-pele/svelte, or from comark-ui's entry for that renderer. Those components draw the same SVG on the server, then switch to Pele's mount() in the browser, which fits each diagram to its container and adds zoom.

On its own, comark-pele draws with Pele's colors. To put its diagrams on the --comark-* tokens, as comark-ui does, add mermaidCss from comark-ui/client to the page; Theme lists what it sets.

Comark has a built-in mermaid plugin too, which reads the same fences. Register only one of them for mermaid fences, or give comark-pele its own language with pele({ languages: ["pele"] }). Renderers covers using it with other plugins.

Through comark-ui, each diagram sits on a card in a 1px frame, and Pele paints it with the page's colors, so it follows light and dark like the other blocks without being drawn again. The rules sit in a comark CSS layer, so any plain rule of your own wins. comark-pele alone draws with Pele's own colors; add mermaidCss from comark-ui/client to the page for these.

Diagrams read these shared tokens:

Pie and xy charts color their series with --comark-chart-1 to --comark-chart-8, then shadcn's --chart-*, like charts.

Pele paints with its --pele-* variables, which the card sets from the tokens. Set one on .pele-diagram to change a single color, such as --pele-accent for highlighted nodes. Pele's theming lists them all.

A diagram is div.pele-diagram, with data-diagram set to its type, such as flowchart or pie, and the SVG inside it is svg.pele. A diagram that failed has data-error and shows its source in pre.pele-source.