programmatically generate dot file

Author: marcusschiesser

package.json

@@ -7,7 +7,10 @@
   "pnpm": {
     "onlyBuiltDependencies": [
       "@swc/core"
-    ]
+    ],
+    "patchedDependencies": {
+      "graphviz-builder": "patches/graphviz-builder.patch"
+    }
   },
   "scripts": {
     "typecheck": "tsc -b --verbose",

packages/viz/examples/vizjs.ts

@@ -2,6 +2,7 @@ import { instance } from '@viz-js/viz';
 import { promises as fs } from 'node:fs';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
+import { digraph } from 'graphviz-builder';
 
 // ES Module equivalent for __dirname
 const __filename = fileURLToPath(import.meta.url);
@@ -10,22 +11,26 @@ const __dirname = path.dirname(__filename);
 async function generateGraphImage() {
   console.log('Generating graph image using @viz-js/viz...');
 
-  // Define a simple graph in DOT language
-  const dotGraph = `
-    digraph SimpleGraph {
-      rankdir=LR; // Left to right layout
-      node [shape=box, style=rounded]; // Node shape
-      A [label="Start Node"];
-      B [label="Middle Node"];
-      C [label="End Node"];
-
-      A -> B [label="Step 1"];
-      B -> C [label="Step 2"];
-      A -> C [label="Skip", style=dashed];
-    }
-  `;
-
   try {
+    // Create a directed graph (digraph)
+    const g = digraph('SimpleGraph');
+
+    // Add nodes with attributes
+    const nodeA = g.createNode('A', { label: 'Start Node', shape: 'box', style: 'rounded' });
+    const nodeB = g.createNode('B', { label: 'Middle Node', shape: 'box', style: 'rounded' });
+    const nodeC = g.createNode('C', { label: 'End Node', shape: 'box', style: 'rounded' });
+
+    // Add edges with attributes
+    g.createEdge([nodeA, nodeB], { label: 'Step 1' });
+    g.createEdge([nodeB, nodeC], { label: 'Step 2' });
+    g.createEdge([nodeA, nodeC], { label: 'Skip', style: 'dashed' });
+
+    // Generate the DOT string
+    const dotGraph = g.toDot();
+
+    console.log('Generated DOT string:');
+    console.log(dotGraph);
+
     // Get the Viz renderer instance
     const viz = await instance();
 

packages/viz/package.json

@@ -29,7 +29,7 @@
     "build": "rimraf dist && tsdown",
     "dev": "tsdown --watch",
     "prepublishOnly": "cp ../../README.md ./README.md",
-    "example:vizjs": "tsx ./examples/vizjs.ts"
+    "example": "tsx ./examples/vizjs.ts"
   },
   "devDependencies": {
     "@types/node": "^22.14.1",
@@ -48,6 +48,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@viz-js/viz": "^3.12.0"
+    "@viz-js/viz": "^3.12.0",
+    "graphviz-builder": "^0.1.1"
   }
 }

patches/graphviz-builder.patch

@@ -0,0 +1,12 @@
+diff --git a/lib/deps/core_ext/hash.js b/lib/deps/core_ext/hash.js
+index f075d9c4cf496a236e0aee6b6191e3ab371aae2d..562decc8683e554514204a4a70472077678d0da3 100644
+--- a/lib/deps/core_ext/hash.js
++++ b/lib/deps/core_ext/hash.js
+@@ -1,6 +1,6 @@
+ var Hash = function() {
+   this.items = new Map();
+-  var i, value;
++  var i, value, l;
+   for (i = 0, l = arguments.length; i < l; i += 2) {
+     value = arguments[i + 1];
+     if (value !== undefined) {