You can also go to the room directly from your browser's URL bar.
Etherpad is a realtime collaborative text editor, like Google Docs. Anyone viewing the same Etherpad as you will see theirs updated in realtime for every change you make.
Each 'room' on graphviz-repl matches an etherpad document with the same name.
Graphviz is a graph vizualization markup language - like markdown for diagrams. Graphviz has 5 different styles of layout. The most popular/common is 'dot' and that's the default.
Every change you make to the etherpad document (left pane) auto-generates a graphviz diagram (right pane).
REPL stands for 'Read Evaluate Print Loop' - it's a jargony term that means the code runs as you write each line, as opposed to being compiled all at once. Graphviz is technically completely re-compiled each time, so this isn't a true REPL - it just feels like one.
Our REPL here is javascript running in the browser that checks for changes frequently - multiple times each second. If there are changes, our server renders the new image for you.
These are also available within a REPL - there is a "Tutorials" button that will copy-paste in each of these examples so you can manipulate them.
digraph SimplestDiagrams { ### Here are 4 "nodes" and 5 "connections": A -> B -> C C -> D B -> A B -> D manySimpleDiagrams -> canBeExpressed -> usingJustCapitalization usingJustCapitalization -> like like -> MixedCase like -> camelCase manySimpleDiagrams -> "might use" -> "'multiple words' in quotes" } # comments start with either # or // // take your pick :D // ### using three #'s might help things line up visually // ### everything must be in a digraph{}
digraph AdvancedAttributes { ### LABELS ### "c" is this node's "node name" or "nickname" ### "label" is the text that shows up inside the circle/node/shape c [label="the letter c"] c -> d ### STYLE & COLOR d [label="DeeDee"] d [style=dotted] d [color=orange] ### MULTIPLE STYLES e [label="The Big E" style=dashed color=purple] f [ label="Effff (f)" style=dashed color=purple ] ### STYLING LINES g -> h -> i [label="comes before" style="dotted" color="purple"] }
digraph FancyOneWithSubgraphs { O -> P ### to make a subgraph with a box around its contents ### you must have "subgraph" and "cluster..." present as in this example ### if you forget cluster in your clustername it will never show up subgraph clusterSomeClusterName { label="title about why these are grouped in here" style="dotted" P -> Q -> R } ### graphviz doesn't mind if you do things outside of a subgraph R [label = "Rrrrrr"] ### If a node is ever used/described/declared inside a subgraph, ### it will always appear within that subgraph. R -> S ### Note: you may want to point to/from a subgraph itself ### sorry you can't really :/ ### you can only point to/from the specific nodes inside of it }
digraph SimplestDiagrams { None [label="No Alert ToDos Distributed"] Distribute [label="Distribute Alert ToDo"] "Screened?" [ shape=record ] OrganizationMatch [ shape=record label="{OrganizationMatch|Distribution Type\nAsset Size}" ] AssigneesMatch [ shape=record label="{AssigneesMatch|Product\nCompliance\nReporter\nGeneral}" ] "An Alert" -> "Screened?" "Screened?" -> "OrganizationMatch" [label="no"] "Screened?" -> "None" [label="yes"] "OrganizationMatch" -> "AssigneesMatch" [label="match(es)" arrowhead=crow] "OrganizationMatch" -> "None" [label="no matches"] "AssigneesMatch" -> "Distribute" [label="match(es)" arrowhead=crow] "AssigneesMatch" -> "None" [label="no matches"] }