v0.3.0

Minor Changes

• a7f0a30 Thanks @r4ai! - Add option to specify the tag name and properties of the container element of the generated Graphviz diagram

  With the introduction of the properties option, deprecate the className and style options. To specify the class name and style of the container element, use the properties.className and properties.style properties instead:

  import { unified } from "unified";
  import remarkParse from "remark-parse";
  import remarkRehype from "remark-rehype";
  import rehypeGraphviz from "rehype-graphviz";
  import rehypeStringify from "rehype-stringify";
  import { Graphviz } from "@hpcc-js/wasm";
  
  const md = `
  # Hello World
  
  \`\`\`dot
  digraph {
    a -> b
  }
  \`\`\`
  `;
  
  const html = unified()
    .use(remarkParse)
    .use(remarkRehype)
    .use(rehypeGraphviz, {
      graphviz: await Graphviz.load(),
      properties: {
        className: "graphviz",
        style: "overflow: clip;",
      },
    })
    .use(rehypeStringify)
    .processSync(md)
    .toString();
  
  console.log(html);

  Yields:

  <h1>Hello World</h1>
  <div class="graphviz" style="overflow: clip;">
    <!--?xml version="1.0" encoding="UTF-8" standalone="no"?-->
    <!-- Generated by graphviz version 9.0.0 (0) -->
    <!-- Pages: 1 -->
    <svg width="62pt" height="116pt" viewBox="0.00 0.00 62.00 116.00" xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink">
      <g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 112)">
        <polygon fill="white" stroke="none" points="-4,4 -4,-112 58,-112 58,4 -4,4"></polygon>
        <!-- a -->
        <g id="node1" class="node">
          <title>a</title>
          <ellipse fill="none" stroke="black" cx="27" cy="-90" rx="27" ry="18"></ellipse>
          <text text-anchor="middle" x="27" y="-85.8" font-family="Times,serif" font-size="14.00">a</text>
        </g>
        <!-- b -->
        <g id="node2" class="node">
          <title>b</title>
          <ellipse fill="none" stroke="black" cx="27" cy="-18" rx="27" ry="18"></ellipse>
          <text text-anchor="middle" x="27" y="-13.8" font-family="Times,serif" font-size="14.00">b</text>
        </g>
        <!-- a&#45;&gt;b -->
        <g id="edge1" class="edge">
          <title>a->b</title>
          <path fill="none" stroke="black" d="M27,-71.7C27,-64.41 27,-55.73 27,-47.54"></path>
          <polygon fill="black" stroke="black" points="30.5,-47.62 27,-37.62 23.5,-47.62 30.5,-47.62"></polygon>
        </g>
      </g>
    </svg>
  </div>

Patch Changes

• 0ae3d13 Thanks @r4ai! - Exports the default option as defaultRehypeGraphgizOption

• 6259969 Thanks @r4ai! - Added documentation for Options in README

v0.2.0

Breaking Changes

CommonJS is no longer supported and is now a pure ESM package.

Also, Node.js has been changed to target only v16 and above.