[{"data":1,"prerenderedAt":211},["ShallowReactive",2],{"\u002Fdeclarative-diagrams":3},{"id":4,"title":5,"body":6,"createdAt":199,"description":12,"draft":200,"extension":201,"image":202,"mastodonThread":203,"meta":204,"navigation":205,"path":206,"seo":207,"stem":5,"tags":208,"updatedAt":209,"__hash__":210},"content\u002FDeclarative Diagrams.md","Declarative Diagrams",{"type":7,"value":8,"toc":194},"minimark",[9,13,16,25,30,33,44,48,51,57,60,83,89,92,103,109,112,116,119,125,128,131,137,140,144,147,153,190],[10,11,12],"p",{},"I love diagrams! I love code! Mashing them together is delightful :)",[10,14,15],{},"The idea here is to write some markup, like we do with HTML, and just like with HTML\u002FCSS we let the computer do the heavy lifting to decide what pixels go where. I long ago fell in love with GraphViz. More recently I've expanded that love to PlantUML! Let's take a look.",[10,17,18],{},[19,20,24],"a",{"href":21,"rel":22},"https:\u002F\u002Fgithub.com\u002Fshubhamgrg04\u002Fawesome-diagramming",[23],"nofollow","List of Awesome Diagramming tools",[26,27,29],"h2",{"id":28},"graphviz-via-plantuml","GraphViz (via PlantUML)",[10,31,32],{},"We'll start off with some simple GraphViz. This is basically a set of nodes and edges plus a bunch of hints about how we want it arranged. So we can be simple:",[34,35,40],"pre",{"className":36,"code":38,"language":39},[37],"language-text","digraph G {\n  a -> b -> c\n}\n","text",[41,42,38],"code",{"__ignoreMap":43},"",[45,46],"img",{"src":47},"https:\u002F\u002Fwww.plantuml.com\u002Fplantuml\u002Fpng\u002FIybCBqeio51mLwZcKb18LD2rKqW24SbSjG00",[10,49,50],{},"And then we can make it a bit more complex:",[34,52,55],{"className":53,"code":54,"language":39},[37],"digraph G {\n\n  \u002F***** Standard preamble I copy\u002Fpaste all the time *****\u002F\n\n  rankdir=LR \u002F\u002F Left-to-right\n  compound=true \u002F\u002F Allow edges between clusters, we're not using this yet\n\n  node [\n    shape=rect\n    style=\"filled,rounded\"\n    fillcolor=gold\n  ]\n\n  \u002F***** Now the nodes and edges *****\u002F\n\n  a\n  -> b\n  -> c\n\n  b -> d [ label=\"alt\" ]\n}\n",[41,56,54],{"__ignoreMap":43},[45,58],{"src":59},"https:\u002F\u002Fwww.plantuml.com\u002Fplantuml\u002Fpng\u002FJKz1QiGm3Bpx5KCkXR8XBt2Xfr9OUcYFonuSMvkOAhQH5K8e_Njnjj3g8ccaqMX2dCIL6I_uCWOO7blWGrqAJWAAa5j69hp2vx8FnLKbE6ReJD2u40x6qCZYqcU8Oi_l60QSwQQzvbxYDAi1V5vANbEmAYkrXMVcl872H1KZwKQKu7cjIb9FsEX122ahrXhJ19rZnKxQX58EX8i1W3gxGbR8wxtLdSbsjyXCuIHDZq9tZ1hcCsUnK-PWWEi_mszvEnoronKkXT-__imv0_HF6E_9DsXiLS05x4PYspdM3bVp_GC0",[10,61,62,63,66,67,70,71,73,74,76,77,79,80,82],{},"Now lets say we want that ",[41,64,65],{},"d"," to be directly below the ",[41,68,69],{},"b"," node. This is where there is some trickstyness involved. Generally when you are using a declarative system you are giving up control over some of these nitty gritty details. Still ... there are hints that we can give. In this case what we'll do is to say that the edge between ",[41,72,69],{}," and ",[41,75,65],{}," is not a \"constraint\", which means that they layout won't make ",[41,78,65],{}," a \"child\" (separate rank) of ",[41,81,69],{},".",[34,84,87],{"className":85,"code":86,"language":39},[37],"digraph G {\n\n  \u002F***** Standard preamble I copy\u002Fpaste all the time *****\u002F\n\n  rankdir=LR \u002F\u002F Left-to-right\n  compound=true \u002F\u002F Allow edges between clusters, we're not using this yet\n\n  node [\n    shape=rect\n    style=\"filled,rounded\"\n    fillcolor=gold\n  ]\n\n  \u002F***** Now the nodes and edges *****\u002F\n\n  a\n  -> b\n  -> c\n\n  b -> d [ label=\"alt\" constraint=false ]\n}\n",[41,88,86],{"__ignoreMap":43},[45,90],{"src":91},"https:\u002F\u002Fwww.plantuml.com\u002Fplantuml\u002Fpng\u002FJKz1QiGm3Bpx5KCkXR9BNk12JwMmzD0UbpqejfAOAdQG5S9I-lVYtKAhYwIHHgE9QL9QPxpWopcWVso13wCSIIDMPLe6ORmYbFNQhrIDGIAmcM5fOTmOVIChvS-Or9_UqVSuyMX7AqTDqsmE26LPovQZDzsuBJoBb1qS9wuOs7RcZ21RDTPwmCuFoiZ5iDMK9zYSAgviJIYNo3Wx0AWphUoLWzrRkmhxRamY70_Qz3Xsjr73Gf6YVYeI7N3vP_Yjx3T7xN85vVZxrvyvSi3n2SCzXGODhOeuGsXWyHs9TGWbLrDAsVn8KXaNz_q3",[10,93,94,95,97,98,73,100,102],{},"This is not quite what we want though, since now ",[41,96,65],{}," is basically a top-level node. What we can do instead is put ",[41,99,69],{},[41,101,65],{}," into a group together and declare that all the members of that group have the same \"rank\".",[34,104,107],{"className":105,"code":106,"language":39},[37],"digraph G {\n\n  \u002F***** Standard preamble I copy\u002Fpaste all the time *****\u002F\n\n  rankdir=LR \u002F\u002F Left-to-right\n  compound=true \u002F\u002F Allow edges between clusters, we're not using this yet\n\n  node [\n    shape=rect\n    style=\"filled,rounded\"\n    fillcolor=gold\n  ]\n\n  \u002F***** Now the nodes and edges *****\u002F\n\n  a\n  -> b\n  -> c\n\n  {\n    rank=same\n    b -> d [ label=\"alt\" ]\n  }\n}\n",[41,108,106],{"__ignoreMap":43},[45,110],{"src":111},"https:\u002F\u002Fwww.plantuml.com\u002Fplantuml\u002Fpng\u002FJOzDQiCm48NtEiN3cq99y0bKwAeKGXVjCcGnbYQsw5WIqXXZGkvUv1JQsGpptlnzFeo5yeGtt8m1-kSM-5AAdef7Bapp88ntk9ItFbDL1eb09uQ6cR5Fz6suKFpseTZJ9_eU9xxgKTEnX75I0xWqvxH4RxKit1fUHT8AzYDN3AmhSuIJfIgNUi3AJuKHasAf8OxGALHihErGJ9vnDW1G9yfi2pjzbBe9s-uQHDWVIhl7ljkjfhaagTWnYJV0vH_mHrftehQvWgB__UiFZWnmVC7mIAv9jtrlexQLPjwheRaUPmWDBBOZqGuN0zpD_GS0",[26,113,115],{"id":114},"plantuml","PlantUML",[10,117,118],{},"PlantUML is a funny sort of super-language. For the most part it looks at the content of your markup and guesses what sort of diagram you want. It can do this since the syntax of each diagram is different enough to be distinguishable. Starting with my favorite, a sequence diagram, this is the exact and complete code:",[34,120,123],{"className":121,"code":122,"language":39},[37],"browser -> server : Request page\nserver -> database : Query for matching post\ndatabase -> server : Search results\nserver -> browser : Rendered page\n",[41,124,122],{"__ignoreMap":43},[45,126],{"src":127},"https:\u002F\u002Fwww.plantuml.com\u002Fplantuml\u002Fpng\u002FJSt13O9058JXErLC0pJ0WHxK2jwo8vW0Y_FUQkpUI8ZXEfdyNr9vEuMsXrCl2XskV5PwOBEHpR6sFRA59NEYmwLI7zoBi5WCqsCTiHMFvdyvvsuq3HD4htFuAPWE-oUkcMBUoIy0",[10,129,130],{},"Now we can compare that to this activity diagram. Each part of this code corresponds to a part of the diagram, and it should be very readable even without reading the documentation.",[34,132,135],{"className":133,"code":134,"language":39},[37],"start\n\nif (Sunny outside?) then (yes)\n  :Go for a walk;\nelse (no)\n  :Stay inside;\nendif\n:Eat ice cream;\n\nstop\n",[41,136,134],{"__ignoreMap":43},[45,138],{"src":139},"https:\u002F\u002Fwww.plantuml.com\u002Fplantuml\u002Fpng\u002F7Sl13OCm30NGkwVunx02EVHKCG0JME08gs1NiL6LxQls_FGYkIUHDfJrDXlmEqDtUKp8GmnbI4m4p8kZUGVZm-UhafmXAEP_MvC7r7wlajYkZUOd9tGJR5tugaIH_lu2",[26,141,143],{"id":142},"mermaid","Mermaid",[10,145,146],{},"I don't like it as much as PlantUML when it comes to the syntax, but Mermaid is increasingly popular and available. Specifically, you can put Mermaid directly in markdown and github will render it!",[34,148,151],{"className":149,"code":150,"language":39},[37],"graph TD;\n    A-->B;\n    A-->C;\n    B-->D;\n    C-->D;\n",[41,152,150],{"__ignoreMap":43},[34,154,156],{"className":155,"code":150,"language":142,"meta":43,"style":43},"language-mermaid shiki shiki-themes github-light github-dark monokai",[41,157,158,166,172,178,184],{"__ignoreMap":43},[159,160,163],"span",{"class":161,"line":162},"line",1,[159,164,165],{},"graph TD;\n",[159,167,169],{"class":161,"line":168},2,[159,170,171],{},"    A-->B;\n",[159,173,175],{"class":161,"line":174},3,[159,176,177],{},"    A-->C;\n",[159,179,181],{"class":161,"line":180},4,[159,182,183],{},"    B-->D;\n",[159,185,187],{"class":161,"line":186},5,[159,188,189],{},"    C-->D;\n",[191,192,193],"style",{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .sepia .shiki span {color: var(--shiki-sepia);background: var(--shiki-sepia-bg);font-style: var(--shiki-sepia-font-style);font-weight: var(--shiki-sepia-font-weight);text-decoration: var(--shiki-sepia-text-decoration);}html.sepia .shiki span {color: var(--shiki-sepia);background: var(--shiki-sepia-bg);font-style: var(--shiki-sepia-font-style);font-weight: var(--shiki-sepia-font-weight);text-decoration: var(--shiki-sepia-text-decoration);}",{"title":43,"searchDepth":168,"depth":168,"links":195},[196,197,198],{"id":28,"depth":168,"text":29},{"id":114,"depth":168,"text":115},{"id":142,"depth":168,"text":143},"2022-10-01",false,"md","https:\u002F\u002Fwww.plantuml.com\u002Fplantuml\u002Fpng\u002FIybCBqeio51mLwZcAahCoqx9BBBr2UBAoqz9LOZcAiv8B4YrJSglu8hbKb18LD2rKqW24SbSjG00.png",null,{},true,"\u002Fdeclarative-diagrams",{"title":5,"description":12},[],"2024-09-07","3H0mEfFLpJ-5PF8ld5FQPp8t5fijMauRHDdLtiA-RkQ",1778988311307]