@beoe/rehype-vizdom

Rehype plugin to generate Vizdom diagrams in place of code fences. Example:

Diagram

Markdown

```vizdom graphFormat=dagre class=shadow
digraph TD {
    cluster=true
    node [shape=box]
    subgraph Watcher {
        label="watch"
        Watch [label="FS Notifier"]
    }
    Watch -> TailW [label="*.rs & input.css"]
    Watch -> Sass [label="*.sass & *.scss"]
    Watch -> Append [label="*.css"]
    Watch -> WASM [label="*.rs"]
    Watch -> BIN [label="*.rs"]
    Watch -> Mirror [label="assets/**"]
    subgraph style {
        label=style
        TailW [label="Tailwind CSS"]
        Sass
        CSSProc [label="CSS Processor\nLightning CSS"]
        Append [label="append"]
    }
    TailW -> Append
    Sass -> Append
    Append -> CSSProc
    subgraph rust {
        label=rust
        WASM [label="Client WASM"]
        BIN [label="Server BIN"]
    }
    subgraph asset {
        label=asset
        Mirror
    }
    subgraph update {
        label=update
        WOC [label="target/site/\nWrite-on-change FS"]
        Live [label="Live Reload"]
        Server
    }
    Mirror -> WOC [label="site/**"]
    WASM -> WOC [label="site/pkg/app.wasm"]
    BIN -> WOC [label="server/app"]
    CSSProc -> WOC [label="site/pkg/app.css"]
    Live -> Server [label="Port scan", style=dashed]
    WOC -> Server [label="target/server/app\nsite/**"]
    WOC -> Live [label="site/pkg/app.css,\nclient & server change"]
    Live -> Browser [label="Reload all or\nupdate app.css"]
    Browser;
    Server -> Browser [style=dashed, arrowhead=none]
}
```

Installation

npm

npm i @beoe/rehype-vizdom

yarn

yarn add @beoe/rehype-vizdom

pnpm

pnpm add @beoe/rehype-vizdom

Usage

import rehypeVizdom from "@beoe/rehype-vizdom";

const html = await unified()
  .use(remarkParse)
  .use(remarkRehype)
  .use(rehypeVizdom, {
    /* options */
  })
  .use(rehypeStringify)
  .process(`markdown`);

Check out other options.

Configuration

You probaly want to use inline strategy and implement dark scheme via CSS:

.vizdom {
  :not([fill]) {
    fill: var(--sl-color-white);
  }
  [fill="black"],
  [fill="#000"] {
    fill: var(--sl-color-white);
  }
  [stroke="black"],
  [stroke="#000"] {
    stroke: var(--sl-color-white);
  }
  [fill="white"],
  [fill="#fff"] {
    fill: var(--sl-color-black);
  }
  [stroke="white"],
  [stroke="#fff"] {
    stroke: var(--sl-color-black);
  }
}

Tip

inline strategy allows to use interactivity.

graphFormat

graphFormat specifies format of a graph to pass to data-beoe attribute. If value is falsy no data is passed. Currently supports two formats: graphology and dagre.

data-beoe meant to be used on client side for interactivity. You can grab it parse as JSON and pass “graph” library, for example:

• @dagrejs/graphlib is about 12kb
• graphology is about 70kb uncompressed
• graph-data-structure is about 4kb (but it doesn’t support ids for edges)
• DirectedGraph is about 40kb
• Other options

Issues

• Text is transformed to path, so Cmd + F doesn’t work
• Doesn’t support some unicode chars, like label="∅"