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