Links & image nodes

Any node or edge can carry one URL. Clicking it opens the link in a new tab. If a node's URL points to an image, the node is drawn as that image.

URL syntax

The URL is the fourth attribute slot, after size, style and color. A word is taken as a URL when it starts with one of these prefixes:

You write	Link goes to
`/example.com/docs`	`https://example.com/docs`	try it
`https://example.com`	unchanged	try it
`http://example.com`	unchanged	try it
`www.example.com`	`https://www.example.com`	try it
`mailto:someone@example.com`	unchanged: opens your mail program	try it

The leading-slash form is the shortest way to write an HTTPS link. It means "https:// plus the rest", not a path on the current site, so relative links aren't possible. A URL is a single word: it ends at the first space, so encode spaces as %20. Query strings and #fragments work, because a # only starts a comment after whitespace.

Linked nodes

wiki   square teal /en.wikipedia.org/wiki/Graph_drawing Graph drawing
mdn    square blue https://developer.mozilla.org/en-US/docs/Web/SVG#tutorials SVG docs
search square gray /duckduckgo.com/?q=modl+diagram Search
mail   circle pink mailto:someone@example.com?subject=Hello Email
home   hex teal www.example.com Home page

Open in editor

Links on edges

Edges take a URL in the same position. Click anywhere along the line to follow it:

Linked edges

spec square blue Specification
impl square teal Implementation
spec -> impl bold teal /github.com/curtcox/modl implemented by
impl -> spec dashed blue /en.wikipedia.org/wiki/Conformance_testing tested against

Open in editor

Clicking, hovering, dragging

Click a node or edge to open its URL in a new tab. Nodes and edges without a URL do nothing.
Hover to see the node id (or edge endpoints), full text and link in a tooltip.
Dragging a linked node moves it without opening the link.

Image nodes

A node whose URL is an image is drawn as the image itself instead of a shape. The editor treats a URL as an image when:

its path ends in an image extension (.svg, .png, .apng, .jpg, .jpeg, .gif, .webp, .avif, .bmp, .ico, any letter case), or
it has no such extension, but the browser can load it as an image anyway. The editor tries every http(s) node URL in the background, and the node switches to the picture once it loads.

If an image fails to load, the node falls back to its normal shape. Edges never become images, and clicking an image node still opens its URL.

Image nodes

logo    https://upload.wikimedia.org/wikipedia/commons/0/02/SVG_logo.svg SVG logo
avatar  /github.com/github.png GitHub
favicon /www.google.com/favicon.ico favicon
icon    /curtcox.github.io/modl/docs/img/server.svg server.svg
logo -> avatar -> favicon
avatar -> icon

Open in editor

No extension: detected by loading it

me   https://avatars.githubusercontent.com/u/9919 Detected as an image
them square /example.com Not an image, so a normal node
me -> them

Open in editor

Image size

Without a size, an image is drawn at its natural pixel size. With a size, it is scaled to fit inside that size's node box (110 × 64 for normal; see sizes), keeping its proportions.

A 64 × 64 icon at its natural size and at explicit sizes

natural  /curtcox.github.io/modl/docs/img/user.svg natural
t tiny   /curtcox.github.io/modl/docs/img/user.svg tiny
s small  /curtcox.github.io/modl/docs/img/user.svg small
n normal /curtcox.github.io/modl/docs/img/user.svg normal
b big    /curtcox.github.io/modl/docs/img/user.svg big

Open in editor

Frames and color

An image node has no outline unless you give a shape explicitly, since the default circle isn't drawn. A given shape becomes a frame around the image, filled and outlined in the node's color. Shape none means no frame.

Frames

plain   /curtcox.github.io/modl/docs/img/user.svg no frame
c circle   blue   /curtcox.github.io/modl/docs/img/user.svg circle
s square   green  /curtcox.github.io/modl/docs/img/user.svg square
d diamond  orange /curtcox.github.io/modl/docs/img/user.svg diamond
t triangle red    /curtcox.github.io/modl/docs/img/user.svg triangle
h hex      purple /curtcox.github.io/modl/docs/img/user.svg hex
n none     pink   /curtcox.github.io/modl/docs/img/user.svg none

Open in editor

Labels

An image node's text is drawn below the image. An image node without text has no label at all; its id isn't shown. Hover to see the id.

Text goes underneath

a /curtcox.github.io/modl/docs/img/database.svg Orders DB
b /curtcox.github.io/modl/docs/img/database.svg
a -> b dashed replica

Open in editor

Because the editor tries to load every node URL as an image, your browser requests each linked page in the background when a diagram opens. This is how images without an extension are detected.

The icons used in these examples live with the documentation at https://curtcox.github.io/modl/docs/img/: user.svg, server.svg, database.svg, cloud.svg and phone.svg. Any publicly reachable image works the same way.