flowchart-sequence-designer 1.0.0

package/dist/index.js

@@ -0,0 +1,817 @@
+// src/core/model.ts
+var Model = class _Model {
+  data;
+  /**
+   * Create an empty model.
+   *
+   * @param type     Top-level kind — `flowchart` or `sequence`.
+   * @param title    Optional human-readable title.
+   * @param variant  Optional UI variant (flowchart models only).
+   */
+  constructor(type, title, variant) {
+    this.data = { type, ...variant ? { variant } : {}, title, nodes: [], edges: [], actors: [], messages: [] };
+  }
+  /**
+   * Rehydrate a `Model` from a previously serialized `DiagramModel`. The
+   * incoming data is deep-cloned, so future mutations on the returned `Model`
+   * do not affect the caller's object.
+   */
+  static fromData(data) {
+    const m = new _Model(data.type, data.title, data.variant);
+    m.data = structuredClone(data);
+    return m;
+  }
+  /** Set the UI variant. No-op semantics for sequence models. */
+  setVariant(variant) {
+    this.data.variant = variant;
+    return this;
+  }
+  /**
+   * Append a node. Throws if a node with the same id already exists. The
+   * input is shallow-cloned, so later mutations of the caller's object do
+   * not leak in.
+   */
+  addNode(node) {
+    if (this.data.nodes.find((n) => n.id === node.id)) {
+      throw new Error(`Node with id "${node.id}" already exists`);
+    }
+    this.data.nodes.push({ ...node });
+    return this;
+  }
+  /**
+   * Patch an existing node in place. Throws if the id is not found. The id
+   * field itself cannot be patched — to rename, remove + re-add.
+   */
+  updateNode(id, patch) {
+    const node = this.data.nodes.find((n) => n.id === id);
+    if (!node) throw new Error(`Node "${id}" not found`);
+    Object.assign(node, patch);
+    return this;
+  }
+  /**
+   * Remove a node and every edge that referenced it as `from` or `to`. Safe
+   * to call on a missing id (no-op).
+   */
+  removeNode(id) {
+    this.data.nodes = this.data.nodes.filter((n) => n.id !== id);
+    this.data.edges = this.data.edges.filter((e) => e.from !== id && e.to !== id);
+    return this;
+  }
+  /**
+   * Append an edge. Throws on duplicate id or if either endpoint references
+   * an unknown node — the model never holds dangling edges from this entry
+   * point. (Importers can still construct dangling edges; call `validate()`
+   * to detect them.)
+   */
+  addEdge(edge) {
+    if (this.data.edges.find((e) => e.id === edge.id)) {
+      throw new Error(`Edge with id "${edge.id}" already exists`);
+    }
+    if (!this.data.nodes.find((n) => n.id === edge.from)) {
+      throw new Error(`Edge "${edge.id}" references unknown source node "${edge.from}"`);
+    }
+    if (!this.data.nodes.find((n) => n.id === edge.to)) {
+      throw new Error(`Edge "${edge.id}" references unknown target node "${edge.to}"`);
+    }
+    this.data.edges.push({ ...edge });
+    return this;
+  }
+  /**
+   * Surface structural problems without throwing. Returns an array of
+   * `ValidationError`s; empty array means the model is well-formed. Used by
+   * the editor's status banner and by external tooling.
+   */
+  validate() {
+    const errors = [];
+    const nodeIds = /* @__PURE__ */ new Set();
+    for (const n of this.data.nodes) {
+      if (nodeIds.has(n.id)) errors.push({ kind: "duplicate-node-id", id: n.id, message: `Duplicate node id "${n.id}"` });
+      nodeIds.add(n.id);
+    }
+    const edgeIds = /* @__PURE__ */ new Set();
+    for (const e of this.data.edges) {
+      if (edgeIds.has(e.id)) errors.push({ kind: "duplicate-edge-id", id: e.id, message: `Duplicate edge id "${e.id}"` });
+      edgeIds.add(e.id);
+      if (!nodeIds.has(e.from)) errors.push({ kind: "dangling-from", id: e.id, message: `Edge "${e.id}" references unknown source node "${e.from}"` });
+      if (!nodeIds.has(e.to)) errors.push({ kind: "dangling-to", id: e.id, message: `Edge "${e.id}" references unknown target node "${e.to}"` });
+    }
+    return errors;
+  }
+  /** Remove an edge by id. Safe to call on a missing id (no-op). */
+  removeEdge(id) {
+    this.data.edges = this.data.edges.filter((e) => e.id !== id);
+    return this;
+  }
+  /** Append a sequence actor. Duplicate names are silently ignored. */
+  addActor(name) {
+    if (!this.data.actors.includes(name)) {
+      this.data.actors.push(name);
+    }
+    return this;
+  }
+  /**
+   * Append a sequence message. The actors referenced by `from`/`to` are not
+   * validated here — callers are expected to register them via `addActor()`
+   * first.
+   */
+  addMessage(message) {
+    this.data.messages.push({ ...message });
+    return this;
+  }
+  /**
+   * Return a deep-cloned plain `DiagramModel`. Safe to mutate by the caller;
+   * mutations do not flow back into this `Model`.
+   */
+  toJSON() {
+    return structuredClone(this.data);
+  }
+};
+
+// src/core/ids.ts
+function nextId(prefix, existing) {
+  const escaped = prefix.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  const re = new RegExp(`^${escaped}(\\d+)$`);
+  let max = 0;
+  for (const item of existing) {
+    const match = re.exec(item.id);
+    if (match) {
+      const n = parseInt(match[1], 10);
+      if (n > max) max = n;
+    }
+  }
+  return `${prefix}${max + 1}`;
+}
+
+// src/exporters/mermaid.ts
+var SHAPE_OPEN = {
+  rectangle: "[",
+  diamond: "{",
+  circle: "((",
+  parallelogram: "[/"
+};
+var SHAPE_CLOSE = {
+  rectangle: "]",
+  diamond: "}",
+  circle: "))",
+  parallelogram: "/]"
+};
+function formatNode(node) {
+  const shape = node.shape ?? "rectangle";
+  const open = SHAPE_OPEN[shape] ?? "[";
+  const close = SHAPE_CLOSE[shape] ?? "]";
+  return `  ${node.id}${open}"${node.label}"${close}`;
+}
+function edgeArrow(edge) {
+  const style = edge.style ?? "solid";
+  const arrowhead = edge.arrowhead ?? "arrow";
+  if (style === "dashed" || style === "dotted") return arrowhead === "none" ? "-.-" : "-.->";
+  return arrowhead === "none" ? "---" : "-->";
+}
+function formatEdge(edge) {
+  const arrow = edgeArrow(edge);
+  return edge.label ? `  ${edge.from} ${arrow}|"${edge.label}"| ${edge.to}` : `  ${edge.from} ${arrow} ${edge.to}`;
+}
+function exportFlowchart(model) {
+  const lines = ["graph TD"];
+  if (model.title) lines.unshift(`---
+title: ${model.title}
+---`);
+  for (const node of model.nodes) lines.push(formatNode(node));
+  for (const edge of model.edges) lines.push(formatEdge(edge));
+  return lines.join("\n");
+}
+function msgArrow(msg) {
+  return msg.style === "dashed" ? "-->>" : "->>";
+}
+function exportSequence(model) {
+  const lines = ["sequenceDiagram"];
+  if (model.title) lines.unshift(`---
+title: ${model.title}
+---`);
+  for (const actor of model.actors ?? []) lines.push(`  participant ${actor}`);
+  for (const msg of model.messages ?? []) {
+    lines.push(`  ${msg.from}${msgArrow(msg)}${msg.to}: ${msg.label}`);
+  }
+  return lines.join("\n");
+}
+function toMermaid(model) {
+  return model.type === "sequence" ? exportSequence(model) : exportFlowchart(model);
+}
+
+// src/exporters/plantuml.ts
+function nodeShape(node) {
+  switch (node.shape) {
+    case "diamond":
+      return ["<>", "<>"];
+    case "circle":
+      return ["(", ")"];
+    case "parallelogram":
+      return ["/", "/"];
+    default:
+      return ["[", "]"];
+  }
+}
+function exportFlowchart2(model) {
+  const lines = ["@startuml"];
+  if (model.title) lines.push(`title ${model.title}`);
+  lines.push("");
+  for (const node of model.nodes) {
+    const [open, close] = nodeShape(node);
+    lines.push(`state "${node.label}" as ${node.id} ${open}${close}`);
+  }
+  lines.push("");
+  for (const edge of model.edges) {
+    const arrow = edge.style === "dashed" ? "-[dashed]->" : edge.style === "dotted" ? "-[dotted]->" : "-->";
+    const label = edge.label ? ` : ${edge.label}` : "";
+    lines.push(`${edge.from} ${arrow} ${edge.to}${label}`);
+  }
+  lines.push("@enduml");
+  return lines.join("\n");
+}
+function msgArrow2(msg) {
+  return msg.style === "dashed" ? "-->" : "->";
+}
+function exportSequence2(model) {
+  const lines = ["@startuml"];
+  if (model.title) lines.push(`title ${model.title}`);
+  lines.push("");
+  for (const actor of model.actors ?? []) {
+    lines.push(`participant ${actor}`);
+  }
+  lines.push("");
+  for (const msg of model.messages ?? []) {
+    lines.push(`${msg.from} ${msgArrow2(msg)} ${msg.to} : ${msg.label}`);
+  }
+  lines.push("@enduml");
+  return lines.join("\n");
+}
+function toPlantUML(model) {
+  return model.type === "sequence" ? exportSequence2(model) : exportFlowchart2(model);
+}
+
+// src/exporters/json.ts
+function toJSON(model) {
+  return JSON.stringify(model, null, 2);
+}
+
+// src/exporters/svg.ts
+var NODE_H = 48;
+var Q_BASE_H = 68;
+var Q_ANS_ROW_H = 80;
+var Q_CARD_PAD = 8;
+var MIN_NODE_W = 120;
+var MAX_NODE_W = 320;
+var MIN_Q_W = 220;
+var PADDING = 48;
+var H_GAP = 80;
+var V_GAP = 96;
+function estimateTextW(text, pxPerChar = 7.5) {
+  return text.length * pxPerChar;
+}
+function nodeWidth(label) {
+  return Math.min(MAX_NODE_W, Math.max(MIN_NODE_W, Math.ceil(estimateTextW(label) + 48)));
+}
+function answerCardW(ans) {
+  return Math.max(86, Math.ceil(Math.max(estimateTextW(ans, 7.5) + 20, 56) + 32));
+}
+function questionNodeW(node) {
+  const answers = node.metadata?.answers ?? [];
+  const headerW = estimateTextW(node.label, 8) + 80;
+  if (answers.length === 0) return Math.max(MIN_Q_W, Math.ceil(headerW));
+  const cardsW = answers.reduce((s, a) => s + answerCardW(a), 0) + (answers.length - 1) * Q_CARD_PAD + 2 * Q_CARD_PAD;
+  return Math.max(MIN_Q_W, Math.ceil(Math.max(headerW, cardsW)));
+}
+function questionNodeH(answers) {
+  return Q_BASE_H + (answers.length === 0 ? 48 : Q_ANS_ROW_H);
+}
+function bezierPath(x1, y1, x2, y2) {
+  const dy = y2 - y1;
+  const dyAbs = Math.abs(dy);
+  const dxAbs = Math.abs(x2 - x1);
+  const base = dy > 0 ? dyAbs * 0.55 : Math.max(90, dyAbs * 0.5 + dxAbs * 0.28);
+  const curve = Math.max(36, Math.min(220, base));
+  return `M ${x1} ${y1} C ${x1} ${y1 + curve}, ${x2} ${y2 - curve}, ${x2} ${y2}`;
+}
+function isQuestion(node, variant) {
+  return variant === "question" && !!node.metadata?.answers;
+}
+function computeLayout(model) {
+  const boxes = /* @__PURE__ */ new Map();
+  const sized = model.nodes.map((n) => {
+    const w = isQuestion(n, model.variant) ? questionNodeW(n) : nodeWidth(n.label);
+    const h = isQuestion(n, model.variant) ? questionNodeH(n.metadata?.answers ?? []) : NODE_H;
+    return { node: n, w, h };
+  });
+  const allPositioned = sized.every((s) => typeof s.node.x === "number" && typeof s.node.y === "number");
+  if (allPositioned) {
+    for (const s of sized) {
+      boxes.set(s.node.id, { x: s.node.x, y: s.node.y, w: s.w, h: s.h });
+    }
+    return boxes;
+  }
+  const inDeg = new Map(model.nodes.map((n) => [n.id, 0]));
+  for (const e of model.edges) inDeg.set(e.to, (inDeg.get(e.to) ?? 0) + 1);
+  const layers = /* @__PURE__ */ new Map();
+  const queue = model.nodes.filter((n) => (inDeg.get(n.id) ?? 0) === 0).map((n) => n.id);
+  for (const id of queue) layers.set(id, 0);
+  let head = 0;
+  while (head < queue.length) {
+    const cur = queue[head++];
+    const layer = layers.get(cur) ?? 0;
+    for (const e of model.edges) {
+      if (e.from === cur) {
+        const next = layers.get(e.to) ?? -1;
+        if (next < layer + 1) {
+          layers.set(e.to, layer + 1);
+          queue.push(e.to);
+        }
+      }
+    }
+  }
+  model.nodes.forEach((n) => {
+    if (!layers.has(n.id)) layers.set(n.id, 0);
+  });
+  const byLayer = /* @__PURE__ */ new Map();
+  for (const s of sized) {
+    const layer = layers.get(s.node.id) ?? 0;
+    if (!byLayer.has(layer)) byLayer.set(layer, []);
+    byLayer.get(layer).push(s);
+  }
+  let y = PADDING;
+  for (const layer of [...byLayer.keys()].sort((a, b) => a - b)) {
+    const row = byLayer.get(layer);
+    let x = PADDING;
+    let maxH = 0;
+    for (const s of row) {
+      boxes.set(s.node.id, { x, y, w: s.w, h: s.h });
+      x += s.w + H_GAP;
+      maxH = Math.max(maxH, s.h);
+    }
+    y += maxH + V_GAP;
+  }
+  return boxes;
+}
+function escapeXML(s) {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+var COLORS = {
+  bg: "#fafbfc",
+  dot: "#dbe3ee",
+  nodeFill: "#ffffff",
+  nodeStroke: "#cbd5e1",
+  edge: "#94a3b8",
+  text: "#1e293b",
+  textSub: "#94a3b8",
+  amber: "#d97706",
+  amberSoft: "#fef9ee",
+  amberLine: "#fde68a",
+  amberCardBg: "#fffdf7"
+};
+function renderStandardNode(node, box) {
+  const cx = box.x + box.w / 2;
+  const cy = box.y + box.h / 2;
+  const shape = node.shape ?? "rectangle";
+  const label = `<text x="${cx}" y="${cy + 4.5}" text-anchor="middle" font-family="ui-sans-serif,system-ui,-apple-system,sans-serif" font-size="13" font-weight="500" fill="${COLORS.text}">${escapeXML(node.label)}</text>`;
+  let shapeEl = "";
+  if (shape === "diamond") {
+    const pts = `${cx},${box.y} ${box.x + box.w},${cy} ${cx},${box.y + box.h} ${box.x},${cy}`;
+    shapeEl = `<polygon points="${pts}" fill="${COLORS.nodeFill}" stroke="${COLORS.nodeStroke}" stroke-width="1.25" filter="url(#nodeShadow)"/>`;
+  } else if (shape === "circle") {
+    const r = Math.min(box.w, box.h) / 2 - 1;
+    shapeEl = `<circle cx="${cx}" cy="${cy}" r="${r}" fill="${COLORS.nodeFill}" stroke="${COLORS.nodeStroke}" stroke-width="1.25" filter="url(#nodeShadow)"/>`;
+  } else if (shape === "parallelogram") {
+    const pts = `${box.x + 14},${box.y} ${box.x + box.w},${box.y} ${box.x + box.w - 14},${box.y + box.h} ${box.x},${box.y + box.h}`;
+    shapeEl = `<polygon points="${pts}" fill="${COLORS.nodeFill}" stroke="${COLORS.nodeStroke}" stroke-width="1.25" filter="url(#nodeShadow)"/>`;
+  } else {
+    shapeEl = `<rect x="${box.x}" y="${box.y}" width="${box.w}" height="${box.h}" rx="14" fill="${COLORS.nodeFill}" stroke="${COLORS.nodeStroke}" stroke-width="1.25" filter="url(#nodeShadow)"/>`;
+  }
+  return shapeEl + label;
+}
+function renderQuestionNode(node, box) {
+  const answers = node.metadata?.answers ?? [];
+  const clipId = `qhdr-${node.id.replace(/[^a-zA-Z0-9_-]/g, "_")}`;
+  const x = box.x, y = box.y, w = box.w, h = box.h;
+  const parts = [];
+  parts.push(`<rect x="${x}" y="${y}" width="${w}" height="${h}" rx="14" fill="${COLORS.nodeFill}" stroke="${COLORS.amberLine}" stroke-width="1.5" filter="url(#nodeShadow)"/>`);
+  parts.push(`<defs><clipPath id="${clipId}"><rect x="${x}" y="${y}" width="${w}" height="${Q_BASE_H}" rx="14"/></clipPath></defs>`);
+  parts.push(`<rect x="${x}" y="${y}" width="${w}" height="${Q_BASE_H}" fill="${COLORS.amberSoft}" clip-path="url(#${clipId})"/>`);
+  parts.push(`<rect x="${x}" y="${y}" width="4" height="${Q_BASE_H}" rx="2" fill="${COLORS.amber}"/>`);
+  parts.push(`<rect x="${x + 12}" y="${y + 14}" width="28" height="28" rx="8" fill="${COLORS.amber}"/>`);
+  parts.push(`<text x="${x + 26}" y="${y + 33}" text-anchor="middle" font-size="15" font-weight="900" fill="white">?</text>`);
+  parts.push(`<text x="${x + 50}" y="${y + 27}" font-family="ui-sans-serif,system-ui,sans-serif" font-size="9" font-weight="700" fill="${COLORS.textSub}" letter-spacing="0.6">QUESTION</text>`);
+  parts.push(`<text x="${x + 50}" y="${y + 42}" font-family="ui-sans-serif,system-ui,sans-serif" font-size="13" font-weight="700" fill="${COLORS.text}">${escapeXML(node.label)}</text>`);
+  parts.push(`<line x1="${x}" y1="${y + Q_BASE_H}" x2="${x + w}" y2="${y + Q_BASE_H}" stroke="${COLORS.amberLine}" stroke-width="1"/>`);
+  if (answers.length === 0) {
+    parts.push(`<text x="${x + w / 2}" y="${y + Q_BASE_H + 22}" text-anchor="middle" font-size="10" fill="${COLORS.amber}" opacity="0.4" font-weight="600">No answers yet</text>`);
+  } else {
+    const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
+    answers.forEach((ans, i) => {
+      const prevW = answers.slice(0, i).reduce((s, a) => s + answerCardW(a) + Q_CARD_PAD, 0);
+      const cW = answerCardW(ans);
+      const cardX = x + Q_CARD_PAD + prevW;
+      const cardY = y + Q_BASE_H + 7;
+      const cardH = Q_ANS_ROW_H - 20;
+      const cx = cardX + cW / 2;
+      const letter = i < 26 ? letters[i] : `${i + 1}`;
+      const maxChars = Math.max(2, Math.floor((cW - 20) / 7.5));
+      const displayAns = ans.length > maxChars ? ans.slice(0, maxChars - 1) + "\u2026" : ans;
+      parts.push(`<rect x="${cardX}" y="${cardY}" width="${cW}" height="${cardH}" rx="8" fill="${COLORS.amberCardBg}" stroke="${COLORS.amberLine}" stroke-width="1"/>`);
+      parts.push(`<rect x="${cx - 11}" y="${cardY + 7}" width="22" height="22" rx="6" fill="#fef3c7"/>`);
+      parts.push(`<text x="${cx}" y="${cardY + 22}" text-anchor="middle" font-size="10" font-weight="800" fill="${COLORS.amber}">${escapeXML(letter)}</text>`);
+      parts.push(`<text x="${cx}" y="${cardY + 46}" text-anchor="middle" font-size="11" font-weight="500" fill="#374151" font-family="ui-sans-serif,system-ui,sans-serif">${escapeXML(displayAns)}</text>`);
+    });
+  }
+  return parts.join("");
+}
+function renderEdge(edge, boxes, variant, nodes) {
+  const fromBox = boxes.get(edge.from);
+  const toBox = boxes.get(edge.to);
+  if (!fromBox || !toBox) return "";
+  let x1, y1;
+  const fromNode = nodes.find((n) => n.id === edge.from);
+  if (fromNode && isQuestion(fromNode, variant)) {
+    const answers = fromNode.metadata?.answers ?? [];
+    const idx = answers.indexOf(edge.label ?? "");
+    if (idx >= 0) {
+      const prevW = answers.slice(0, idx).reduce((s, a) => s + answerCardW(a) + Q_CARD_PAD, 0);
+      const cW = answerCardW(answers[idx]);
+      x1 = fromBox.x + Q_CARD_PAD + prevW + cW / 2;
+      y1 = fromBox.y + Q_BASE_H + Q_ANS_ROW_H - 8;
+    } else {
+      x1 = fromBox.x + fromBox.w / 2;
+      y1 = fromBox.y + fromBox.h;
+    }
+  } else {
+    x1 = fromBox.x + fromBox.w / 2;
+    y1 = fromBox.y + fromBox.h;
+  }
+  const x2 = toBox.x + toBox.w / 2;
+  const y2 = toBox.y;
+  const dash = edge.style === "dashed" ? ' stroke-dasharray="6,4"' : edge.style === "dotted" ? ' stroke-dasharray="2,3"' : "";
+  const marker = edge.arrowhead === "none" ? "" : ' marker-end="url(#arrow)"';
+  const d = bezierPath(x1, y1, x2, y2);
+  let out = `<path d="${d}" fill="none" stroke="${COLORS.edge}" stroke-width="1.5"${dash}${marker}/>`;
+  if (edge.label) {
+    const midX = (x1 + x2) / 2;
+    const midY = (y1 + y2) / 2;
+    const labelW = estimateTextW(edge.label, 7) + 14;
+    out += `<rect x="${midX - labelW / 2}" y="${midY - 11}" width="${labelW}" height="18" rx="9" fill="${COLORS.bg}" stroke="${COLORS.nodeStroke}" stroke-width="1"/>`;
+    out += `<text x="${midX}" y="${midY + 2}" text-anchor="middle" font-family="ui-sans-serif,system-ui,sans-serif" font-size="11" fill="${COLORS.text}">${escapeXML(edge.label)}</text>`;
+  }
+  return out;
+}
+function toSVG(model) {
+  const boxes = computeLayout(model);
+  let maxX = 0, maxY = 0;
+  for (const b of boxes.values()) {
+    maxX = Math.max(maxX, b.x + b.w);
+    maxY = Math.max(maxY, b.y + b.h);
+  }
+  const width = maxX + PADDING;
+  const height = maxY + PADDING + (model.title ? 32 : 0);
+  const defs = [
+    `<defs>`,
+    `<pattern id="dotgrid" x="0" y="0" width="24" height="24" patternUnits="userSpaceOnUse">`,
+    `<circle cx="12" cy="12" r="1.1" fill="${COLORS.dot}"/>`,
+    `</pattern>`,
+    `<filter id="nodeShadow" x="-20%" y="-20%" width="140%" height="140%">`,
+    `<feDropShadow dx="0" dy="3" stdDeviation="5" flood-color="rgba(15,23,42,0.09)"/>`,
+    `</filter>`,
+    `<marker id="arrow" markerWidth="9" markerHeight="7" refX="8.5" refY="3.5" orient="auto" markerUnits="strokeWidth">`,
+    `<path d="M0,0.5 L9,3.5 L0,6.5 L2.2,3.5 Z" fill="${COLORS.edge}"/>`,
+    `</marker>`,
+    `</defs>`
+  ].join("");
+  const titleEl = model.title ? `<text x="${width / 2}" y="22" text-anchor="middle" font-family="ui-sans-serif,system-ui,sans-serif" font-size="15" font-weight="700" fill="${COLORS.text}">${escapeXML(model.title)}</text>` : "";
+  const edges = model.edges.map((e) => renderEdge(e, boxes, model.variant, model.nodes)).join("\n");
+  const nodes = model.nodes.map((n) => {
+    const b = boxes.get(n.id);
+    return isQuestion(n, model.variant) ? renderQuestionNode(n, b) : renderStandardNode(n, b);
+  }).join("\n");
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">
+${defs}
+<rect width="${width}" height="${height}" fill="${COLORS.bg}"/>
+<rect width="${width}" height="${height}" fill="url(#dotgrid)"/>
+${titleEl}
+${edges}
+${nodes}
+</svg>`;
+}
+async function toPNG(model) {
+  if (typeof document === "undefined") {
+    throw new Error("toPNG requires a browser environment. For Node/Bun server use, pipe toSVG() through @resvg/resvg-js.");
+  }
+  const svg = toSVG(model);
+  const blob = new Blob([svg], { type: "image/svg+xml" });
+  const url = URL.createObjectURL(blob);
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.onload = () => {
+      const canvas = document.createElement("canvas");
+      const scale = window.devicePixelRatio || 2;
+      canvas.width = img.naturalWidth * scale;
+      canvas.height = img.naturalHeight * scale;
+      const ctx = canvas.getContext("2d");
+      ctx.scale(scale, scale);
+      ctx.drawImage(img, 0, 0);
+      URL.revokeObjectURL(url);
+      canvas.toBlob((b) => b ? resolve(b) : reject(new Error("Canvas toBlob failed")), "image/png");
+    };
+    img.onerror = () => {
+      URL.revokeObjectURL(url);
+      reject(new Error("SVG image load failed"));
+    };
+    img.src = url;
+  });
+}
+
+// src/core/flowchart.ts
+var FlowchartBuilder = class {
+  model;
+  /** @param title Optional human-readable diagram title. */
+  constructor(title) {
+    this.model = new Model("flowchart", title);
+  }
+  /**
+   * Append a node. Defaults `shape` to `rectangle` when omitted from `options`.
+   * Throws on duplicate id.
+   */
+  node(id, label, options = {}) {
+    this.model.addNode({ id, label, shape: options.shape ?? "rectangle", ...options });
+    return this;
+  }
+  /**
+   * Append an edge with an auto-generated id. The id is derived from the
+   * current edge list to avoid collisions with imported models.
+   */
+  edge(from, to, options = {}) {
+    this.model.addEdge({ id: nextId("e", this.model.toJSON().edges), from, to, ...options });
+    return this;
+  }
+  /** Remove a node and every edge that references it. */
+  removeNode(id) {
+    this.model.removeNode(id);
+    return this;
+  }
+  /** Remove an edge by id. */
+  removeEdge(id) {
+    this.model.removeEdge(id);
+    return this;
+  }
+  /** Patch an existing node. See `Model.updateNode`. */
+  updateNode(id, patch) {
+    this.model.updateNode(id, patch);
+    return this;
+  }
+  /** Return the underlying `Model` for advanced operations or validation. */
+  getModel() {
+    return this.model;
+  }
+  /** Serialize as Mermaid `flowchart TD` source. */
+  toMermaid() {
+    return toMermaid(this.model.toJSON());
+  }
+  /** Serialize as PlantUML activity-diagram source. */
+  toPlantUML() {
+    return toPlantUML(this.model.toJSON());
+  }
+  /** Serialize as the package's JSON shape (full round-trip fidelity). */
+  toJSON() {
+    return toJSON(this.model.toJSON());
+  }
+  /** Render to a standalone SVG string. */
+  toSVG() {
+    return toSVG(this.model.toJSON());
+  }
+  /** Render to a PNG `Blob`. Browser-only (uses the Canvas API). */
+  toPNG() {
+    return toPNG(this.model.toJSON());
+  }
+};
+function flowchart(title) {
+  return new FlowchartBuilder(title);
+}
+
+// src/core/sequence.ts
+var SequenceBuilder = class {
+  model;
+  /** @param title Optional human-readable diagram title. */
+  constructor(title) {
+    this.model = new Model("sequence", title);
+  }
+  /** Register an actor. Duplicates are silently ignored. */
+  actor(name) {
+    this.model.addActor(name);
+    return this;
+  }
+  /**
+   * Append a message. Both endpoints are auto-registered as actors if not
+   * already present. The id is derived from the current message list.
+   */
+  message(from, to, label, options = {}) {
+    this.model.addActor(from);
+    this.model.addActor(to);
+    const messages = this.model.toJSON().messages ?? [];
+    this.model.addMessage({ id: nextId("m", messages), from, to, label, style: options.style ?? "solid" });
+    return this;
+  }
+  /** Convenience for a `dashed`-style return message. */
+  replyMessage(from, to, label) {
+    return this.message(from, to, label, { style: "dashed" });
+  }
+  /** Return the underlying `Model` for advanced operations or validation. */
+  getModel() {
+    return this.model;
+  }
+  /** Serialize as Mermaid `sequenceDiagram` source. */
+  toMermaid() {
+    return toMermaid(this.model.toJSON());
+  }
+  /** Serialize as PlantUML sequence-diagram source. */
+  toPlantUML() {
+    return toPlantUML(this.model.toJSON());
+  }
+  /** Serialize as the package's JSON shape (full round-trip fidelity). */
+  toJSON() {
+    return toJSON(this.model.toJSON());
+  }
+};
+function sequence(title) {
+  return new SequenceBuilder(title);
+}
+
+// src/importers/mermaid.ts
+function parseNodeDecl(raw) {
+  const patterns = [
+    [/^(\w+)\{\{?"?(.+?)"?\}?\}$/, "diamond"],
+    [/^(\w+)\(\("?(.+?)"?\)\)$/, "circle"],
+    [/^(\w+)\[\/(.+?)\/\]$/, "parallelogram"],
+    [/^(\w+)\[["']?(.+?)["']?\]$/, "rectangle"],
+    [/^(\w+)\("?(.+?)"?\)$/, "rectangle"]
+  ];
+  for (const [re, shape] of patterns) {
+    const m = raw.match(re);
+    if (m) return { id: m[1], label: m[2].replace(/^["']|["']$/g, ""), shape };
+  }
+  return null;
+}
+var EDGE_RE = /^(.+?)\s*(-\.->|-\.-|-->|---)(?:\|(.+?)\|)?\s*(.+)$/;
+function detectStyle(connector) {
+  return connector.startsWith("-.") ? "dashed" : "solid";
+}
+function detectArrowhead(connector) {
+  return connector.endsWith(">") ? "arrow" : "none";
+}
+function parseFlowchart(lines) {
+  const model = new Model("flowchart");
+  const nodeMap = /* @__PURE__ */ new Map();
+  const groupStack = [];
+  const ensureNode = (id, group) => {
+    if (!nodeMap.has(id)) {
+      nodeMap.set(id, true);
+      const metadata = group ? { group } : void 0;
+      model.addNode({ id, label: id, shape: "rectangle", ...metadata ? { metadata } : {} });
+    }
+  };
+  for (const line of lines) {
+    const trimmed = line.trim();
+    if (!trimmed) continue;
+    if (trimmed.startsWith("%%") || trimmed.startsWith("graph") || trimmed.startsWith("flowchart") || trimmed.startsWith("click ") || trimmed.startsWith("classDef ") || trimmed.startsWith("class ") || trimmed.startsWith("style ") || trimmed.startsWith("linkStyle ")) continue;
+    const subgraphOpen = trimmed.match(/^subgraph\s+(\S+)/i);
+    if (subgraphOpen) {
+      groupStack.push(subgraphOpen[1]);
+      continue;
+    }
+    if (/^end\b/i.test(trimmed)) {
+      groupStack.pop();
+      continue;
+    }
+    const currentGroup = groupStack[groupStack.length - 1];
+    const edgeMatch = trimmed.match(EDGE_RE);
+    if (edgeMatch) {
+      const fromRaw = edgeMatch[1].trim();
+      const connector = edgeMatch[2];
+      const label = edgeMatch[3]?.replace(/^["']|["']$/g, "");
+      const toRaw = edgeMatch[4].trim();
+      const style = detectStyle(connector);
+      const arrowhead = detectArrowhead(connector);
+      const fromNode = parseNodeDecl(fromRaw);
+      const toNode = parseNodeDecl(toRaw);
+      if (fromNode && !nodeMap.has(fromNode.id)) {
+        nodeMap.set(fromNode.id, true);
+        const metadata = currentGroup ? { group: currentGroup } : void 0;
+        model.addNode({ ...fromNode, ...metadata ? { metadata } : {} });
+      } else if (!fromNode) {
+        ensureNode(fromRaw.replace(/\W.*/, ""), currentGroup);
+      }
+      if (toNode && !nodeMap.has(toNode.id)) {
+        nodeMap.set(toNode.id, true);
+        const metadata = currentGroup ? { group: currentGroup } : void 0;
+        model.addNode({ ...toNode, ...metadata ? { metadata } : {} });
+      } else if (!toNode) {
+        ensureNode(toRaw.replace(/\W.*/, ""), currentGroup);
+      }
+      const fromId = fromNode?.id ?? fromRaw.replace(/\W.*/, "");
+      const toId = toNode?.id ?? toRaw.replace(/\W.*/, "");
+      model.addEdge({
+        id: nextId("e", model.toJSON().edges),
+        from: fromId,
+        to: toId,
+        ...label ? { label } : {},
+        style,
+        ...arrowhead === "none" ? { arrowhead } : {}
+      });
+      continue;
+    }
+    const nodeDecl = parseNodeDecl(trimmed);
+    if (nodeDecl && !nodeMap.has(nodeDecl.id)) {
+      nodeMap.set(nodeDecl.id, true);
+      const metadata = currentGroup ? { group: currentGroup } : void 0;
+      model.addNode({ ...nodeDecl, ...metadata ? { metadata } : {} });
+    }
+  }
+  return model;
+}
+function parseSequence(lines, title) {
+  const model = new Model("sequence", title);
+  for (const line of lines) {
+    const trimmed = line.trim();
+    if (!trimmed || trimmed.startsWith("sequenceDiagram") || trimmed.startsWith("%%")) continue;
+    const participantMatch = trimmed.match(/^participant\s+(.+)$/i);
+    if (participantMatch) {
+      model.addActor(participantMatch[1].trim());
+      continue;
+    }
+    const actorMatch = trimmed.match(/^actor\s+(.+)$/i);
+    if (actorMatch) {
+      model.addActor(actorMatch[1].trim());
+      continue;
+    }
+    const msgMatch = trimmed.match(/^(.+?)\s*(-->>|->>|-->|->)\s*(.+?):\s*(.+)$/);
+    if (msgMatch) {
+      const from = msgMatch[1].trim();
+      const arrow = msgMatch[2];
+      const to = msgMatch[3].trim();
+      const label = msgMatch[4].trim();
+      model.addActor(from);
+      model.addActor(to);
+      const messages = model.toJSON().messages ?? [];
+      model.addMessage({ id: nextId("m", messages), from, to, label, style: arrow.startsWith("--") ? "dashed" : "solid" });
+    }
+  }
+  return model;
+}
+function fromMermaid(mermaid) {
+  const cleaned = mermaid.replace(/mermaid\.initialize\([\s\S]*?\)\s*;?/g, "");
+  const rawLines = cleaned.split("\n");
+  let startIdx = 0;
+  let title;
+  if (rawLines[0]?.trim() === "---") {
+    const endFm = rawLines.findIndex((l, i) => i > 0 && l.trim() === "---");
+    if (endFm !== -1) {
+      const fmLines = rawLines.slice(1, endFm);
+      for (const fl of fmLines) {
+        const tm = fl.match(/^title:\s*(.+)$/);
+        if (tm) title = tm[1].trim();
+      }
+      startIdx = endFm + 1;
+    }
+  }
+  const lines = rawLines.slice(startIdx);
+  const firstContent = lines.find((l) => l.trim());
+  if (firstContent?.trim().startsWith("sequenceDiagram")) {
+    const m2 = parseSequence(lines, title);
+    return m2;
+  }
+  const m = parseFlowchart(lines);
+  if (title) {
+    const data = m.toJSON();
+    data.title = title;
+    return Model.fromData(data);
+  }
+  return m;
+}
+
+// src/importers/json.ts
+function fromJSON(json) {
+  const data = typeof json === "string" ? JSON.parse(json) : json;
+  if (!data.type || !Array.isArray(data.nodes) || !Array.isArray(data.edges)) {
+    throw new Error("Invalid DiagramModel JSON");
+  }
+  return Model.fromData(data);
+}
+export {
+  FlowchartBuilder,
+  Model,
+  SequenceBuilder,
+  flowchart,
+  fromJSON,
+  fromMermaid,
+  sequence,
+  toJSON,
+  toMermaid,
+  toPNG,
+  toPlantUML,
+  toSVG
+};
+//# sourceMappingURL=index.js.map