ASCII diagram node shape catalogue
Use a JSON node’s shape field, or Mermaid’s N@{shape: doc, label: "Read item"}.
These examples use JSON so the exact public shape name appears beside its output.
Shapes carry meaning through outlines, independent of color.
Basic and semantic shapes
Section titled “Basic and semantic shapes” ┌──────┐
│ rect │
└──────┘ ╭─────────╮
│ rounded │
╰─────────╯ ╭───────────╮
│ ◆ diamond │
╰───────────╯ ◜◠◠◠◠◠◠◠◠◝
│ circle │
◟◡◡◡◡◡◡◡◡◞ ┌──────────────┐
││ subroutine ││
└──────────────┘ ┌────────────╲
│ asymmetric │
└────────────╱ ◜─────────◝
│ stadium │
◟─────────◞ ◜──────────◝
│ cylinder │
◟──────────◞ *
┌─────────────┐
│ compartment │
├─────────────┤
│ +id: string │
├─────────────┤
│ +save() │
└─────────────┘ ╭◠◠◠◠◠◠◠╮
│ cloud │
╰◡◡◡◡◡◡◡╯ *╱╲╱╲╱╲*
│ bang │
*╲╱╲╱╲╱* ╱─────────╲
❬ hexagon ❭
╲─────────╱ Mermaid catalogue shapes
Section titled “Mermaid catalogue shapes”Catalogue names below work in JSON and in Mermaid shape metadata.
┌───────┐
│ doc │
╰◡◡◡◡◡◡◡╯ ┌──────┐
┌──────┐│
│ docs │┘
╰◡◡◡◡◡◡╯ ┌─────────┐
┌─────────┐│
│ st-rect │┘
└─────────┘ ┌───────────┐
│ tag-doc ◇ │
╰◡◡◡◡◡◡◡◡◡◡◡╯ ╱───────────┐
╱ notch-rect │
└────────────┘ ┌──────────┐
├ div-rect ┤
└──────────┘ ┌─┬──────────┐
│ │ lin-rect │
└─┴──────────┘ ┌────────────┐
│ tag-rect ◇ │
└────────────┘ ╱────────╱
╱ lean-r ╱
╱────────╱ ╲────────╲
╲ lean-l ╲
╲────────╲ ────────────
╲ trap-t ╱
╲────────╱ ╱────────╲
╱ trap-b ╲
──────────── ╱────────────╲
│ notch-pent │
└──────────────┘ ┌───────╮
│ delay │
└───────╯ ╲──────────╱
)bow-rect(
╱──────────╲ ╱──────────╮
( curv-trap │
╲──────────╯ ╱╲
╱ ╲
╱ ╲
╱ tri ╲
──────── ────────────
╲ ╱
╲ ╱
flip-tri
╲ ╱
╲ ╱
╲╱ ╲───────────╱
)hourglass(
╱───────────╲ ┌─────────┐
│ ╲╱ bolt │
└─────────┘ ╭◠◠◠◠◠◠╮
│ flag │
╰◡◡◡◡◡◡╯ ╔════════════╗
║( dbl-circ )║
╚════════════╝ (╳) cross-circ
┌───┐
│ ○ │ fr-circ
└───┘ ● f-circ
○ sm-circ
╭───────┬╮
│ h-cyl ││
╰───────┴╯ ┌───────────┐
├───────────┤
│ lin-cyl │
├───────────┤
└───────────┘ ─────────────
datastore
───────────── ◜◠◠◠◠◠◠◠◠◠◠◝
╲ bucket ╱
╰────────╯ text
━━━━━━━━━
│ ╭
┤ brace
╰ ╮
brace-r ├
╯ ╭ ╮
┤ braces ├
╰ ╯ ┌───────────┐
│ ○ browser │
└───────────┘ ┌───────────┐
├───────────┤
│ $ console │
└───────────┘ ○
╭────────╮
│ person │
╰────────╯ ASCII and font compatibility
Section titled “ASCII and font compatibility”ascii uses simpler outlines. Box, blocks, and braille hexagons use ❬ and ❭ sides;
ASCII uses angle brackets. Clouds and bangs also have ASCII outlines.
/----------\ < Decision > \----------/
Code
import { renderGlyphDiagram } from "@glyphcss/diagrams";
const { text } = await renderGlyphDiagram({
direction: "LR",
nodes: [
{
id: "n",
label: "Decision",
shape: "hexagon"
}
],
edges: []
}, {
target: "chat",
charset: "ascii",
width: 30,
height: 9
});
console.log(text); Use Glyph Mono for special glyphs in web output; chat uses the receiving application’s font. See fonts and fallbacks.
Adaptations and connection limits
Section titled “Adaptations and connection limits”Catalogue shapes reserve their full footprint and attach edges away from seams.
point draws the first character of its required nonempty label and cannot have a direct JSON self-edge. fork draws an
unlabelled bar/stub; a supplied label goes below it. compartment accepts member rows.
Mermaid names lin-doc, win-pane, sl-rect, and folder have logged adaptations;
they are not additional JSON shape values. External icons and images are inert.
Inspect render notes when fitting changes an outline or label.