Diagrams and SVG

NodeGraph

DIL source

{@body const [selected, setSelected] = DIL.useState("api")}
<box border padding={4} radius="xl" gap={3}>
  <title>Follow the request.</title>
  <NodeGraph
    selectedId={selected}
    onSelect={setSelected}
    content={{
      nodes: [
        { id: "edge", label: "Gateway", sub: "Ingress", x: 0, y: 72 },
        {
          id: "api",
          label: "API service",
          sub: "Compute",
          x: 240,
          y: 0,
        },
        {
          id: "worker",
          label: "Worker",
          sub: "Async jobs",
          x: 240,
          y: 144,
        },
        { id: "db", label: "Database", sub: "Storage", x: 480, y: 0 },
      ],
      edges: [
        { source: "edge", target: "api" },
        { source: "edge", target: "worker" },
        { source: "api", target: "db" },
      ],
    }}
  />
  <caption>Selected service: {selected}</caption>
</box>

content.nodes contains { id, label, sub?, x?, y? } objects. content.edges contains { id?, source, target, label? }. selectedId controls selection; onSelect receives the selected node’s string ID.

The graph spaces nodes to keep labels and connectors usable. It includes an equivalent button selection path beneath the canvas. Keep descriptions in sub and use meaningful node labels.

Mermaid

DIL source

<Mermaid source={"flowchart LR\n A[Source] --> B[Parser]\n B --> C[Interactive UI]"} />

Mermaid.source is a string. Rendering uses strict security settings, text labels, and sanitized SVG. Source is bounded to 8,192 characters and 100 edges; interactive directives and unsafe styling/HTML are rejected.

SVG

DIL source

<svg viewBox="0 0 400 160" width="100%">
  <rect x="12" y="30" width="120" height="80" rx="12" fill="#F0EEFF" />
  <text x="30" y="75" fill="#252838">Source</text>
  <line x1="145" y1="70" x2="245" y2="70" stroke="#5E4CFF" strokeWidth="2" />
  <rect x="258" y="30" width="130" height="80" rx="12" fill="#F6F7F9" />
  <text x="278" y="75" fill="#252838">Interface</text>
</svg>

The supported vocabulary includes svg, g, defs, marker, path, rect, circle, ellipse, line, polyline, polygon, text, tspan, linearGradient, and stop. Only allowlisted SVG attributes are forwarded. External links, raw HTML, scripts, and arbitrary event attributes are not supported.

Provide a nearby textual explanation for diagrams whose meaning is important to the task.