modl Manual Override Diagram Language Open the editor

Example gallery

Complete diagrams to open, study and adapt. Each one is laid out by hand, so its link carries node positions as well as source.

Flowchart

Diamonds for decisions, colored edge labels for the branches, and a dashed retry loop.

Login flow
# A login flowchart
start small circle teal Start
form  square blue Enter credentials
check diamond orange Valid?
home  square teal Home page
error square red Show error
stop  small circle gray End

start -> form -> check
check -> home teal yes
check -> error red no
error -> form dashed red retry
home -> stop
Open in editor

State machine

Hexagons for states. Solid edges are the happy path and dashed edges are exceptions.

Order lifecycle
# Order lifecycle
new       hex blue New
paid      hex teal Paid
shipped   hex purple Shipped
delivered hex pink Delivered
cancelled hex red Cancelled
refunded  hex orange Refunded

new -> paid pay
paid -> shipped ship
shipped -> delivered deliver
new -> cancelled dashed red cancel
paid -> refunded dashed orange refund
delivered -> refunded dotted orange return
Open in editor

Org chart

Sizes and colors show the hierarchy.

Company structure
ceo  big square purple CEO
cto  square blue CTO
cfo  square teal CFO
coo  square pink COO
dev  small square blue Engineering
ops  small square blue IT
acct small square teal Accounting
hr   small square pink People

ceo -> cto
ceo -> cfo
ceo -> coo
cto -> dev
cto -> ops
cfo -> acct
coo -> hr
Open in editor

Architecture with icons

Image nodes using the icons that ship with these docs. Any image URL works.

Web and mobile clients
# image nodes: id [size] [shape] [color] url text
user  /curtcox.github.io/modl/docs/img/user.svg Visitor
phone /curtcox.github.io/modl/docs/img/phone.svg Mobile app
cdn   /curtcox.github.io/modl/docs/img/cloud.svg CDN
web   /curtcox.github.io/modl/docs/img/server.svg Web server
api   /curtcox.github.io/modl/docs/img/server.svg API
db    /curtcox.github.io/modl/docs/img/database.svg Postgres

user -> cdn -> web
phone -> api blue REST
web -> api
api -> db bold orange SQL
Open in editor

Network

A dark background, a bold ingress path, and dotted lines to the database tier.

Load-balanced web tier
black
internet circle blue /en.wikipedia.org/wiki/Internet Internet
fw       diamond red Firewall
lb       hex orange Load balancer
web1     square teal web-1
web2     square teal web-2
web3     square teal web-3
db       square purple DB primary
replica  small square purple replica

internet -> fw -> lb bold
lb -> web1
lb -> web2
lb -> web3
web1 -> db dotted
web2 -> db dotted
web3 -> db dotted
db -> replica dashed purple sync
Open in editor

Data pipeline

A left-to-right flow with a linked source and labeled schedules.

ETL
# ETL pipeline
csv    square blue /en.wikipedia.org/wiki/Comma-separated_values CSV files
rest   square blue REST API
ingest hex teal Ingest
clean  hex teal Clean
store  big square purple Warehouse
dash   square orange Dashboard
ml     square pink ML model

csv -> ingest
rest -> ingest
ingest -> clean -> store bold
store -> dash dashed nightly
store -> ml dashed weekly
Open in editor

Git branches

Small circles for commits, none nodes as branch labels, and colors per branch.

Feature branch merged back
main    none gray main
feature none teal feature
c1 small circle gray
c2 small circle gray
c3 small circle gray
f1 small circle teal
f2 small circle teal
m  small circle purple merge

c1 -> c2 -> c3 -> m
c2 -> f1 -> f2 teal
f2 -> m dashed teal
Open in editor

Course prerequisites

A dependency graph, with a dashed edge for a recommendation.

Computer science track
cs101 square blue Intro to CS
math1 square teal Discrete math
cs102 square blue Data structures
cs201 square purple Algorithms
cs202 square purple Systems
cs301 square pink Compilers
cs302 square pink Machine learning

cs101 -> cs102 -> cs201 -> cs301
math1 -> cs201
cs102 -> cs202 -> cs301
cs201 -> cs302
math1 -> cs302 dashed recommended
Open in editor

Every node is a bookmark. Click a node in the editor to open its link.

Bookmarks
me     big circle purple Start here
search square blue   /duckduckgo.com Search
wiki   square teal   /en.wikipedia.org Wikipedia
code   square gray   /github.com GitHub
news   square orange /news.ycombinator.com Hacker News
mail   square pink   mailto:someone@example.com Email
docs   square purple /curtcox.github.io/modl/docs/ modl docs

me -> search dotted
me -> wiki dotted
me -> code dotted
me -> news dotted
me -> mail dotted
me -> docs dotted
Open in editor

Solar system

Sizes and colors on a black background, each body linked to its Wikipedia article.

Inner planets and Jupiter
black
sun     bigger circle orange /en.wikipedia.org/wiki/Sun Sun
mercury tiny circle gray /en.wikipedia.org/wiki/Mercury_(planet)
venus   small circle orange /en.wikipedia.org/wiki/Venus
earth   small circle blue /en.wikipedia.org/wiki/Earth
moon    tiny circle gray /en.wikipedia.org/wiki/Moon
mars    small circle red /en.wikipedia.org/wiki/Mars
jupiter big circle brown /en.wikipedia.org/wiki/Jupiter Jupiter

earth -> moon dotted gray
Open in editor

Mind map

A topic map of these docs, with each branch linked to its page.

modl at a glance
modl    big circle purple modl
syntax  circle blue   /curtcox.github.io/modl/docs/structure.html Syntax
nodes   small circle blue   /curtcox.github.io/modl/docs/nodes.html nodes
edges   small circle blue   /curtcox.github.io/modl/docs/edges.html edges
attrs   small circle blue   /curtcox.github.io/modl/docs/attributes.html attributes
share   circle orange /curtcox.github.io/modl/docs/sharing.html Sharing
url     small circle orange /curtcox.github.io/modl/docs/sharing.html#url URL
hashbin small circle orange /curtcox.github.io/modl/docs/sharing.html#hashbin HashBin
look    circle teal   /curtcox.github.io/modl/docs/styles.html Looks
styles  small circle teal   /curtcox.github.io/modl/docs/styles.html styles
images  small circle teal   /curtcox.github.io/modl/docs/links.html#images images

modl -> syntax blue
modl -> share orange
modl -> look teal
syntax -> nodes blue
syntax -> edges blue
syntax -> attrs blue
share -> url orange
share -> hashbin orange
look -> styles teal
look -> images teal
Open in editor

The editor's starter diagram

The diagram the editor shows when opened without a link, or after Reset.

Starter
# Diagram Editor — edit this text, then copy the URL

# 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

# you can define nodes implicitly by referencing them in edges:
a -> b -> c bold yellow /example.com Chain applies to each edge
Open in editor