@knowvah/eleventy-plugin-dot

Render Graphviz DOT fenced code blocks to inline SVG in Eleventy — at build time, no client JS — powered by the pure-TypeScript @knowvah/dot-engine and the shared @knowvah/dot-core render engine.

Eleventy is a static generator, so this plugin renders diagrams during the build and embeds static <svg>. It hooks Eleventy's default markdown-it engine.

Install

npm i -D @knowvah/eleventy-plugin-dot @knowvah/dot-engine

Requires Eleventy 2.0+ (uses amendLibrary) with its default markdown-it engine. @knowvah/dot-engine is a peer dependency.

Usage

// eleventy.config.js
import eleventyPluginDot from '@knowvah/eleventy-plugin-dot';

export default function (eleventyConfig) {
  eleventyConfig.addPlugin(eleventyPluginDot, {
    // options (all optional)
    defaultEngine: 'dot',
    useCurrentColor: true,
  });
}

Then in any markdown file:

```dot
digraph {
  rankdir=LR;
  parse -> layout -> render;
}
```

Include the styles once in your layout (copy into your assets, or pipe through your CSS build): @knowvah/eleventy-plugin-dot/style.css.

Options

Same as @knowvah/dot-core's DotPluginOptions: renderLanguage, mode (build | client), defaultEngine, wrapperClass, timeout (child-process safe-mode for untrusted DOT), onError (panel | throw), and useCurrentColor (theme-aware colors). Per-block: ```dot engine=neato, ```dot no-render, ```dot client.

Client mode

Build mode is the default (static SVG). For ```dot client blocks (or mode: 'client'), the plugin emits a framework-neutral <dot-diagram> web component that renders in the browser — register it once in your site's JS:

import { defineDotDiagram } from '@knowvah/eleventy-plugin-dot/client';
defineDotDiagram();

Stability

As of 1.0, this package follows semantic versioning: the documented public API is stable, and breaking changes will bump the major version.

License

MIT © Knowvah