Etherpad

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

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.

REPL

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.

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"]
}