modl
modl (Manual Override Diagram Language) is a small, line-oriented text language for drawing node-and-arrow diagrams. Each line declares a node or an arrow. The editor redraws the diagram as you type and keeps the whole diagram, source and layout, in its URL.
hello -> worldEvery listing in these docs has an Open in editor link like the one above. The link carries the example's source in its URL, so it opens the editor with that diagram loaded. Change it however you like: nothing is saved anywhere unless you press Save to HashBin.
A quick tour
A node line starts with an id, followed by optional attributes and a label:
api square blue API server
db diamond purple DatabaseAn edge line connects ids with ->. Ids that haven't been declared yet become nodes automatically:
browser -> api -> dbEdges take attributes too, and # starts a comment:
# A three-tier web app
browser circle teal /developer.mozilla.org Browser
api square blue API server
db diamond purple Database
browser -> api bold blue HTTPS # thick blue arrow with a label
api -> db dashed SQLA line with nothing but a color name sets the background:
white
sun big circle yellow Sun
earth circle blue Earth
sun -> earth dotted orange lightCheat sheet
| Line | Form | Example |
|---|---|---|
| Comment | # anything, or after code following whitespace | try it |
| Background | color alone on a line | try it |
| Node | id [size] [shape] [color] [url] [text…] | try it |
| Edge | a -> b [-> c …] [size] [line style] [color] [url] [text…] | try it |
| Quoted word | "…" or '…' as an id or text: taken literally, with ->, # and spaces as text | try it |
| Attribute | Values |
|---|---|
| size | tiny small normal big bigger huge |
| shape (nodes) | none circle square diamond triangle hex |
| line style (edges) | solid dashed dotted bold |
| color | gray black white red orange yellow green teal blue purple pink brown |
| url | /host/path (means https://host/path), https://…, http://…, www.…, mailto:… |
| text | everything else up to the end of the line |
Attributes are optional, but the ones you use must appear in this order. A word that is out of order becomes part of the label instead (see Attributes).
# Comments start with #
black # background color
# nodes: id [size] [shape] [color] [url] [text...]
n square red /google.com Node N
m circle blue /wikipedia.org Node M
t triangle green /example.com Triangle
# edges: a -> b (-> c ...) [size] [lineStyle] [color] [url] [text...]
n -> m solid purple /news.ycombinator.com N to M
m -> t small dotted teal /slashdot.org Dotted link
t -> n dashed orange /github.com Back edge
# nodes can be created just by mentioning them in an edge
a -> b -> c bold yellow /example.com Chain applies to each edgeReading the listings
Listings are highlighted the way the editor reads them, so you can see how each word is understood:
node-id -> size shape / line style color url label text # comment invalid id ignoredContents
- Source structure: lines, comments, whitespace, background
- Nodes: ids, defaults, labels, redefinition
- Edges: arrows, chains, labels, parallel edges
- Attributes: slot order, how words are recognized, label text
- Sizes, shapes, lines & colors: every reserved word
- Links & image nodes: URLs, clicking, pictures as nodes
- Sharing & positions: the URL format, layout, HashBin
- Gotchas: surprising behavior and workarounds
- Grammar reference: formal grammar, defaults, errors
- Example gallery: complete diagrams to start from
Using the editor
- Type in the source pane; the diagram updates after a short pause and the URL updates with it.
- Drag a node to move it, drag the background to pan, and use +/− to zoom.
- Hover over a node or edge to see its id, full text, and link. Click to open its link.
- Source, Diagram, Help and Split switch between views.
- Copy URL copies a link to exactly what you see. Commit snapshot adds a browser history entry so Back and Forward step between versions.
- QR code shows a QR code of that link, so an audience can open the diagram on their phones. Long URLs make dense codes; save to HashBin first for a short link that scans easily.
- Save to HashBin stores the diagram and replaces the long URL with a short one (see Sharing).