Diagrams

A fence tagged mermaid is the whole API. Pele renders it at build time, so the drawing is in the HTML and the fence stays copyable.

Every value is a var(), so the surface decides the colours.

A source Pele cannot read prints the parser's sentence with the source under it:

this is not a diagram

The Diagram componentCopy Anchor Link

A diagram is a drawing, and the Diagram component is what draws one. You give it a Mermaid source and it renders the diagram, themed in the library's own colours.

The renderer is Pele — a zero-dependency Mermaid renderer that needs no DOM. Measured in a plain Node process, with typeof document and typeof window both undefined, a flowchart rendered to a 403×64 SVG.

import { Diagram } from "@gpuixui/components/diagram";

<Diagram
  aria-label="The render path"
  source={"flowchart LR\n  A[Author] --> B[Component]"}
  caption="How a component becomes a picture"
/>;

The theme rolesCopy Anchor Link

The component reads the theme's colours and bakes them into the drawing as literal values, because a raster resolves no custom property — and Pele writes its palette twice, as the public --pele-* set and an internal --_* set.

The three roles that are not colours — --pele-radius, --pele-font and --pele-font-mono — are given literal values, because a raster carries no font of its own.

Interactive diagramsCopy Anchor Link

The same Pele render, with a zoom/pan canvas. The drawing below is live — wheel or the buttons to zoom, drag to pan.

import { DiagramView } from "@/components/diagram/DiagramView";
import { ZoomPan } from "@/components/diagram/ZoomPan";

<ZoomPan
  controls={({ zoomIn, zoomOut, resetZoom, centerView, scalePercent }) => (
    <>…</>
  )}
>
  <DiagramView chart={source} config={{ theme: "ocean" }} />
</ZoomPan>;

DiagramViewCopy Anchor Link

themeVariables keeps Mermaid's names (primaryColor, primaryTextColor, primaryBorderColor, background, textColor, lineColor, secondaryColor, tertiaryColor) and maps them to Pele's roles, so a config copied from Mermaid keeps working. A variable Pele has no role for is ignored rather than painted as a property nothing reads.

PlaygroundCopy Anchor Link

Edit the source, switch a template, pick a theme, then zoom, fit or reset. Copy and download take the rendered SVG Pele produced.

import { DiagramPlayground } from "@/components/diagram/DiagramPlayground";

<DiagramPlayground defaultValue={source} />;

The preview renders one deferred value behind the editor, so typing stays smooth while the diagram still follows the source. Pele is synchronous, so the picture appears on the same render as its source; there is no spinner state to show.

ThemesCopy Anchor Link

default reads the page's roles, so it follows the light/dark switch without a second render. A named theme sets the --pele-* properties on the diagram's wrapper; the SVG is not rendered again.

The categoryCopy Anchor Link

This is the Graphics category: the things the library draws.

The charts are TanStack Charts' scene compiler, compiled to a document the runtime's own renderer paints; the icons are the library's own set; the diagrams are Pele's renderer, on the same document route. One category, one paint path.

Edit this page on GitHubapps/docs/content/docs/graphics/diagrams.mdx