Edit the textarea below to update the chart!
chart = dot`${source}`
html` ${DOM.download(await rasterize(chart), null, "Download as PNG")} ${DOM.download(await serialize(chart), null, "Download as SVG")} `
viewof source = { const textarea = html`<textarea>digraph { rankdir = LR; node [shape = doublecircle]; LR_0 LR_3 LR_4 LR_8; node [shape = circle]; LR_0 -> LR_2 [ label = "SS(B)" ]; LR_0 -> LR_1 [ label = "SS(S)" ]; LR_1 -> LR_3 [ label = "S($end)" ]; LR_2 -> LR_6 [ label = "SS(b)" ]; LR_2 -> LR_5 [ label = "SS(a)" ]; LR_2 -> LR_4 [ label = "S(A)" ]; LR_5 -> LR_7 [ label = "S(b)" ]; LR_5 -> LR_5 [ label = "S(a)" ]; LR_6 -> LR_6 [ label = "S(b)" ]; LR_6 -> LR_5 [ label = "S(a)" ]; LR_7 -> LR_8 [ label = "S(b)" ]; LR_7 -> LR_5 [ label = "S(a)" ]; LR_8 -> LR_6 [ label = "S(b)" ]; LR_8 -> LR_5 [ label = "S(a)" ]; }`; textarea.style.display = "block"; textarea.style.boxSizing = "border-box"; textarea.style.width = "calc(100% + 28px)"; textarea.style.font = "var(--mono_fonts)"; textarea.style.minHeight = "60px"; textarea.style.border = "none"; textarea.style.padding = "4px 10px"; textarea.style.margin = "0 -14px"; textarea.style.background = "rgb(247,247,249)"; textarea.style.tabSize = 2; textarea.oninput = () => { textarea.style.height = "auto"; textarea.style.height = `${textarea.scrollHeight}px`; }; yield textarea; textarea.oninput(); yield textarea; }
See the DOT language documentation and the Graphviz gallery for examples!
import {dot} from "@mbostock/graphviz"
import {rasterize, serialize} from "@mbostock/saving-svg"