2d:null 2e:["$","title",null,{"children":"Graphviz Subgraph Examples | Brian Stringfellow | Observable"}] 33:[] 31:{"id":"8b3e461b0056db51","slug":"graphvis-subgraph-table-label","title":"Graphviz Subgraph Examples","thumbnail":"e08bcb17a3ce8ee5b4661cdc52a99c94c1d3519c1e64f8e83bd09ea601dbbf4a","access_level":"public","create_time":"$D2018-02-26T04:36:24.143Z","update_time":"$D2020-09-19T17:15:14.767Z","view_time":null,"first_public_time":"$D2018-03-06T22:00:13.529Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"80a52387548392c1","login":"brianstringfellow","name":"Brian Stringfellow","avatar_url":"https://avatars-next.observableusercontent.com/f754cc2a62155b5dd776a6615bc09e7ac86c3a4af5c2399b4f91b87dc88b7841","tier":"starter_2024"},"version":281,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"186b479b2d6756f3","login":"brianstringfellow","name":"Brian Stringfellow","avatar_url":"https://avatars-next.observableusercontent.com/f754cc2a62155b5dd776a6615bc09e7ac86c3a4af5c2399b4f91b87dc88b7841","tier":null}],"members":[{"type":"individual","id":"186b479b2d6756f3","login":"brianstringfellow","name":"Brian Stringfellow","avatar_url":"https://avatars-next.observableusercontent.com/f754cc2a62155b5dd776a6615bc09e7ac86c3a4af5c2399b4f91b87dc88b7841","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"title":"Graphviz Subgraph Examples","cells":[{"id":0,"value":"md`# Graphviz Subgraph Examples`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"md`\n## Setting a subgraph label to display a table of values.\nNote that the label in the first **subgraph** does not display as a set of records. It was hoped that rows could be defined as in a *record-based* **node** but the setting \\`label = \"{x|y|z}\";\\` did not render as expected.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"dot`\ndigraph G {\n node [ shape = \"Mrecord\" ];\n subgraph cluster_A {\n style = rounded;\n label = \"{x|y|z}\";\n NodeA [label=\"{a|b|c}\"];\n\tNodeB [label=\"{d|e}\"];\n\tNodeA -> NodeB;\n };\n subgraph cluster_B {\n style = rounded;\n label = <

xx	ww
yy
zz

>;\n NodeC [label =<

aa	gg
bb
cc

>];\n\tNodeD [label=<

dd	hh
ee

>];\n\tNodeC -> NodeD;\n };\n}\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"md`\n## Linking a subgraph to a node\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"dot`\ndigraph G {\n compound=true;\n node [ shape = \"Mrecord\" ];\n subgraph cluster_0 {\n style = rounded;\n label = \"Zero\";\n\tNode_0_0 -> Node_0_1;\n };\n subgraph cluster_1 {\n style = rounded;\n label = \"One\";\n \tNode_1_0 -> Node_1_1;\n };\n subgraph cluster_2 {\n style = rounded;\n label = \"Two\";\n Node_2_0 -> Node_2_1;\n };\n NodeA [ style = rounded ];\n NodeA -> Node_0_0 [lhead = cluster_0];\n NodeA -> Node_1_0 [lhead = cluster_1];\n NodeA -> Node_2_0 [lhead = cluster_2];\n}\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"md` ## ARM Parameter Flow`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"dot`\ndigraph G {\n rankdir=\"LR\";\n \"deploy.ps1\" [shape=box, style=rounded];\n resourceGroupEntry [shape=box, style=rounded];\n AA [shape=box, style=rounded];\n BB [shape=box, style=rounded];\n CC [shape=box, style=rounded];\n\n subgraph cluster_0 {\n label=\"deploy.ps1\";\n style=rounded;\n a0 -> a1;\n }\n\n subgraph cluster_1 {\n label=\"resourceGroupEntry\";\n style=rounded;\n r0;\n }\n\n \"deploy.ps1\" -> resourceGroupEntry;\n \"resourceGroupEntry\" -> AA ;\n \"resourceGroupEntry\" -> BB;\n \"resourceGroupEntry\" -> CC;\n}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"md`Using the [dot template literal](https://beta.observablehq.com/@mbostock/graphviz) by Mike Bostock.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"dot = {\n const Viz = await require(\"https://unpkg.com/viz.js@1.8.0/viz.js\").catch(() => window.Viz);\n return function(strings) {\n let string = strings[0] + \"\", i = 0, n = arguments.length;\n while (++i < n) string += arguments[i] + \"\" + strings[i];\n const fragment = html([Viz(string)]);\n return fragment.removeChild(fragment.firstElementChild);\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"md`<END>`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 32:"$31:body"