Add a template

1. 1
   Create the file

   src/lib/templates/my-system.ts — put large real-world systems in src/lib/templates/big/.
2. 2
   Register it

   Export it from src/lib/templates/index.ts.
3. 3
   Check it

   Load it from the Templates dialog, then press Run — the simulation is a fast sanity check that the graph flows the way you intended.

The shape

import { MarkerType } from "reactflow"

export const MyTemplate = {
  id: "my-system",
  name: "My System",
  description: "One line describing what this architecture shows.",
  nodes: [
    {
      id: "client",
      type: "nautilusNode",
      position: { x: 0, y: 0 },
      data: {
        label: "Mobile Client",
        icon: "client_mobile",   // must exist in the icon reference
        color: "blue",           // default | blue | green | red | yellow | purple | orange
        description: "iOS / Android app",
      },
    },
  ],
  edges: [
    {
      id: "e-client-api",
      source: "client",
      target: "api",
      type: "deletableEdge",
      markerEnd: { type: MarkerType.Arrow },
    },
  ],
}

What makes a good template

• Top-to-bottom layout: clients at the top, storage at the bottom.
• A description on every node — that is what the template teaches.
• Colour by role, matching the rest of the library.
• No cycles unless the real architecture has one.
• Enough components to be realistic, few enough to be readable — roughly 8 to 20.

Node ids are local to the template, so short readable ids like api or orders-db are better than UUIDs.