28:null 29:["$","title",null,{"children":"Graphviz | Gordon Smith | Observable"}] 2e:[] 2c:{"id":"02cbf24318580ea2","slug":"graphviz","title":"Graphviz","thumbnail":"ffbdded4929d36828972b03d702488617392161e85969c546eac67525a634cbf","access_level":"public","create_time":"$D2020-08-26T06:28:07.908Z","update_time":"$D2026-08-26T16:39:25.478Z","view_time":null,"first_public_time":"$D2020-08-26T07:01:29.049Z","has_unpublished_edits":null,"fork":{"id":"df43e9bfccb61dab","slug":"dot","title":"Graphviz","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":25,"starred":false,"owner":{"type":"team","id":"1ca386e9fdf73037","login":"gordonsmith","name":"Gordon Smith","avatar_url":"https://avatars-next.observableusercontent.com/78b1e9a8876f3e6bb69bf1b0cbe8833994e77a8bdd7893eef27fe59c995b0fe0","tier":"starter_2024"},"version":1040,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"ecffd59db269e2b5","login":"gordonsmith","name":"Gordon Smith","avatar_url":"https://avatars-next.observableusercontent.com/78b1e9a8876f3e6bb69bf1b0cbe8833994e77a8bdd7893eef27fe59c995b0fe0","tier":null}],"members":[{"type":"individual","id":"ecffd59db269e2b5","login":"gordonsmith","name":"Gordon Smith","avatar_url":"https://avatars-next.observableusercontent.com/78b1e9a8876f3e6bb69bf1b0cbe8833994e77a8bdd7893eef27fe59c995b0fe0","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":21,"collection":{"id":"f7f673c37cc6d998","slug":"graphviz","title":"Graphviz","owner":{"id":"1ca386e9fdf73037","login":"gordonsmith","name":"Gordon Smith"}},"type":"notebook","body":{"title":"Graphviz","cells":[{"id":0,"value":"md`# Graphviz\n\n_This is an API compatible fork of [@observablehq/graphviz](https://observablehq.com/@observablehq/graphviz) using a wasm version of **Graphviz v${await graphviz.version()}**_ \n\nA quick demo of [Graphviz](http://www.graphviz.org/) using its Emscripten port from [@hpcc-js/wasm](https://github.com/hpcc-systems/hpcc-js-wasm/).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":518,"value":"dot`\ndigraph G {\n\tgraph[ordering = \"in\"];\n\tnode8->node153\n\tnode211->node8\n\tnode221->node8\n\tnode12->node153\n\tnode12->node205\n\tnode91->node14 // possibly not needed\n\tnode211->node22\n\tnode48->node205\n\tnode91->node48 // possibly not needed\n\tnode118->node48\n\tnode51->node221\n\tnode118->node51\n\tnode72->node221 // possibly not needed\n\tnode8->node205\n\tsubgraph group0 {\n\t\tcluster=true;\n\t\tnode8\n\t\tnode12\n\t\tnode14 // possibly not needed\n\t\tnode22\n\t\tnode48\n\t\tnode51\n\t\tnode72 // possibly not needed\n\t\tnode91 // possibly not needed\n\t\tnode118\n\t\tnode153\n\t\tnode205\n\t\tnode211\n\t\tnode221\n\t}\n}`;\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1038,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":60,"value":"circo`\ngraph { \n splines = ortho\n n0 -- n1 -- n2 -- n3 -- n0; \n}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"dot`digraph { x -> y -> z; }`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"dot`\ndigraph G {\n subgraph cluster_0 {\n style=filled;\n color=lightgrey;\n node [style=filled,color=white];\n a0 -> a1 -> a2 -> a3;\n label = \"process #${1}\";\n }\n subgraph cluster_1 {\n node [style=filled];\n b0 -> b1 -> b2 -> b3;\n label = \"process #${2}\";\n color=blue\n }\n start -> a0;\n start -> b0;\n a1 -> b3;\n b2 -> a3;\n a3 -> a0;\n a3 -> end;\n b3 -> end;\n start [shape=Mdiamond];\n end [shape=Msquare];\n}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":513,"value":"dot`\ndigraph structs {\n node [shape=record];\n struct1 [label=\" left| mid\ dle| right\"];\n struct2 [label=\" one| two\"];\n struct3 [label=\"hello\nworld |{ b |{c| d|e}| f}| g | h\"];\n struct1:f1 -> struct2:f0;\n struct1:f2 -> struct3:here;\n}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":918,"value":"dot`\ndigraph Blah {\n rankdir=\"LR\"\n node [shape=\"box\"];\n A -> B -> C;\n B -> D;\n}\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":212,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"graphvizModule = import ('@hpcc-js/wasm-graphviz');","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":861,"value":"graphviz = graphvizModule.Graphviz.load();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"layout = {\n let _id = 0;\n return function(layout) {\n return function * (parts, ...args) {\n yield html`

...loading...

`;\n \n const str = parts.map((s, i) => s + (i < args.length ? args[i] : \"\")).join(\"\");\n \n const svgText = graphviz.layout(str, \"svg\", layout)\n const id = ++_id;\n yield html`

${svgText}

`\n\n const div = d3.select(`#id_${id}`);\n const svg = div.select(\"svg\");\n const [x, y, _width, height] = svg.attr(\"viewBox\").split(\" \");\n svg\n .attr(\"width\", width -2)\n ;\n \n const g = svg.select(\"g\");\n const zoom = d3.zoom();\n svg.call(zoom\n .extent([[0, 0], [width, height]])\n .scaleExtent([0.1, 2])\n .on(\"zoom\", ({ transform }) => g.attr(\"transform\", transform))\n );\n svg.call(zoom.translateTo, width / 2, -height / 2); \n \n }\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"circo = layout(\"circo\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"dot = layout(\"dot\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"fdp = layout(\"fdp\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":453,"value":"sfdp = layout(\"sfdp\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"neato = layout(\"neato\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"osage = layout(\"osage\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"patchwork = layout(\"patchwork\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"twopi = layout(\"twopi\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":697,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W2e","stdlib":"1","titling":"auto"}} 2d:"$2c:body"