{"id":"ec7472ec7bc29a21","slug":"graphviz-c-graph-api","trashed":false,"description":"","likes":0,"publish_level":"public","forks":0,"fork_of":null,"has_importers":false,"update_time":"2026-09-07T14:41:55.634Z","first_public_version":null,"paused_version":null,"publish_time":"2026-07-16T15:17:35.359Z","publish_version":501,"latest_version":501,"thumbnail":"33aeff952bad42fe9a249da61e9a5a001ed1b4ceee8df9ffef65887ec28fdb25","default_thumbnail":"f94ea05b39a772a0fc3bd56f66bc7765cdc5a9f8422c1d36de638916ec94974d","roles":[],"sharing":null,"owner":{"id":"1ca386e9fdf73037","avatar_url":"https://avatars.observableusercontent.com/avatar/78b1e9a8876f3e6bb69bf1b0cbe8833994e77a8bdd7893eef27fe59c995b0fe0","login":"gordonsmith","name":"Gordon Smith","bio":"","home_url":"http://hpccsystems.com","type":"team","tier":"starter_2024"},"creator":{"id":"ecffd59db269e2b5","avatar_url":"https://avatars.observableusercontent.com/avatar/78b1e9a8876f3e6bb69bf1b0cbe8833994e77a8bdd7893eef27fe59c995b0fe0","login":"gordonsmith","name":"Gordon Smith","bio":"","home_url":"http://hpccsystems.com","tier":"public"},"authors":[{"id":"ecffd59db269e2b5","avatar_url":"https://avatars.observableusercontent.com/avatar/78b1e9a8876f3e6bb69bf1b0cbe8833994e77a8bdd7893eef27fe59c995b0fe0","name":"Gordon Smith","login":"gordonsmith","bio":"","home_url":"http://hpccsystems.com","tier":"public","approved":true,"description":""}],"collections":[],"files":[],"comments":[],"commenting_lock":null,"suggestion_from":null,"suggestions_to":[],"version":501,"title":"Graphviz - CGraph API","license":null,"copyright":"","nodes":[{"id":1,"value":"# Graphviz - CGraph API\n\n_Examples of using the CGraph API to build a Graphviz Graph_\n\n## Hello World\n\n_Label will default to ID if not explicitly set_","pinned":false,"mode":"md","data":null,"name":""},{"id":5,"value":"const hw = gv.createGraph()\n  .addNode(\"Hello\")\n  .addNode(\"World\")\n  .addEdge(\"Hello\", \"World\");\n\ninvalidation.then(() => {\n  gv.delete();\n});","pinned":true,"mode":"js","data":null,"name":null},{"id":8,"value":"${hw.toDot()}","pinned":true,"mode":"js","data":null,"name":null},{"id":9,"value":"## Simple Attributes\n_See [Graphviz docs](https://graphviz.org/doc/info/attrs.html) for attribute specific information_","pinned":false,"mode":"md","data":null,"name":""},{"id":10,"value":"const sa = gv.createGraph()\n  .addNode(\"A\")\n  .setNodeAttr(\"A\", \"label\", \"Node A\")\n  .setNodeAttr(\"A\", \"shape\", \"rect\")\n  .addNode(\"B\")\n  .setNodeAttr(\"B\", \"label\", \"Node B\")\n  .setNodeAttr(\"B\", \"shape\", \"rect\")\n  .addEdge(\"A\", \"B\", \"\")\n  .setEdgeAttr(\"A\", \"B\", \"\", \"label\", \"a->b\");\n\ninvalidation.then(() => {\n  sa.delete();\n});","pinned":true,"mode":"js","data":null,"name":null},{"id":11,"value":"${sa.toDot()}","pinned":true,"mode":"js","data":null,"name":null},{"id":12,"value":"## Create With Attributes\n_Easier one shot creation of nodes and edges_","pinned":false,"mode":"md","data":null,"name":""},{"id":13,"value":"const cwa = gv.createGraph(\"G\")\n  .addNode(\"A\", { label:\"Node A\", shape: \"egg\"})\n  .addNode(\"B\", { label:\"Node B\", shape: \"house\"})\n  .addNode(\"C\", { label:\"Node C\", shape: \"circle\"})\n  .addNode(\"D\", { label:\"Node D\", shape: \"hexagon\"})\n  .addEdge(\"A\",  \"B\", { label: \"a->b\" })\n  .addEdge(\"A\", \"C\", { label: \"a->c\" })\n  .addEdge(\"B\", \"D\", { label: \"b->d\" })\n  .addEdge(\"C\", \"D\", { label: \"c->d\" })\n  .addEdge(\"D\", \"A\");\n\ninvalidation.then(() => {\n  cwa.delete();\n});","pinned":true,"mode":"js","data":null,"name":null},{"id":14,"value":"${cwa.toDot()}","pinned":true,"mode":"js","data":null,"name":null},{"id":16,"value":"## Subgraphs / Clusters\n\n_Embedding nodes/edges within subgraph/clusters_","pinned":false,"mode":"md","data":null,"name":""},{"id":17,"value":"const main = gv.createGraph(\"G\");\nconst sg1 = main.addSubgraph(\"c1\", { label: \"Subgraph A\" })\n  .addNode(\"A\", { label:\"Node A\", shape: \"egg\" })\n  .addNode(\"B\", { label:\"Node B\", shape: \"house\" })\n  .addEdge(\"A\",  \"B\", { label: \"a->b\" });\nconst sg2 = main.addSubgraph(\"c2\", { label: \"Subgraph B\" })\n  .addNode(\"C\", { label:\"Node C\", shape: \"rect\" })\n  .addNode(\"D\", { label:\"Node D\", shape: \"hexagon\" })\n  .addEdge(\"C\", \"D\", { label: \"d->c\" });\nmain\n  .addEdge(\"A\", \"C\", { label: \"a->c\" })\n  .addEdge(\"B\", \"D\", { label: \"b->d\" })\n  .addEdge(\"D\", \"A\", { id:\"D->A\", style: \"dashed\", class: \"running\" });\n\ninvalidation.then(() => {\n  main.delete();\n});","pinned":true,"mode":"js","data":null,"name":null},{"id":18,"value":"${main.toDot()}","pinned":true,"mode":"js","data":null,"name":null},{"id":21,"value":"## Bypass built-in dot renderer\n\n_Alternativly bypass the Observable DOT rendering engine (it doesn't support html labels for example)_","pinned":false,"mode":"md","data":null,"name":""},{"id":20,"value":"html({raw: [main.layout()]})","pinned":true,"mode":"js","data":null,"name":null},{"id":25,"value":"## Render using @hpcc-js/graph\n\n_Supports **zoom** (mouse wheel), **zoom to fit** (on double click), **selection**, styling etc._","pinned":false,"mode":"md","data":null,"name":null},{"id":23,"value":"<div id=\"id_main\" style=\"border: 1px solid lightGray;height: 480px\"></div>","pinned":false,"mode":"html","data":null,"name":""},{"id":24,"value":"display(selection);","pinned":false,"mode":"js","data":null,"name":null},{"id":37,"value":"const selection = Mutable([]);\nconst setSelection = (_) => (selection.value = _);","pinned":false,"mode":"js","data":null,"name":null},{"id":29,"value":"const g = new GV.Widget()\n  .target(\"id_main\")\n  .data(main)\n  .on(\"selectionChanged\", () => {\n    setSelection(g.selection());\n  })\n  .render(w => {\n    w.setClass(\"complete\", [\"c1\", \"A\", \"B\"]);\n    w.setClass(\"failed\", [\"c2\", \"C\", \"D\"]);\n    w.zoomToFit();\n  })\n;\n\ninvalidation.then(() => {\n  g.target(null).render();\n});","pinned":true,"mode":"js","data":null,"name":null},{"id":2,"value":"---\n\n## Appendix\n\n_Instanciate the Graphviz Wasm Module._","pinned":false,"mode":"md","data":null,"name":""},{"id":3,"value":"import { Graphviz } from \"npm:@hpcc-js/wasm-graphviz\";\nimport { Graphviz as GV } from \"npm:@hpcc-js/graph\"\n\nconst gv = await Graphviz.load();\n\ndisplay(`GraphViz Version: ${gv.version()}`);","pinned":true,"mode":"js","data":null,"name":null}],"resolutions":[{"type":"stdlib","specifier":"stdlib","value":"2"},{"type":"unsupported_mode","specifier":"ts","value":"js"},{"type":"unsupported_mode","specifier":"dot","value":"js"}],"schedule":null,"last_view_time":null}