@diagrammo/dgmo 0.2.6 → 0.2.8

package/dist/index.js

@@ -147,6 +147,7 @@ var init_participant_inference = __esm({
 var parser_exports = {};
 __export(parser_exports, {
   isSequenceBlock: () => isSequenceBlock,
+  isSequenceNote: () => isSequenceNote,
   isSequenceSection: () => isSequenceSection,
   looksLikeSequence: () => looksLikeSequence,
   parseSequenceDgmo: () => parseSequenceDgmo
@@ -157,6 +158,9 @@ function isSequenceBlock(el) {
 function isSequenceSection(el) {
   return "kind" in el && el.kind === "section";
 }
+function isSequenceNote(el) {
+  return "kind" in el && el.kind === "note";
+}
 function parseReturnLabel(rawLabel) {
   if (!rawLabel) return { label: "" };
   const arrowReturn = rawLabel.match(ARROW_RETURN_PATTERN);
@@ -167,19 +171,22 @@ function parseReturnLabel(rawLabel) {
   if (umlReturn) {
     return { label: umlReturn[1].trim(), returnLabel: umlReturn[2].trim() };
   }
-  const lastSep = rawLabel.lastIndexOf(" : ");
-  if (lastSep > 0) {
-    const reqPart = rawLabel.substring(0, lastSep).trim();
-    const resPart = rawLabel.substring(lastSep + 3).trim();
-    if (reqPart && resPart) {
-      return { label: reqPart, returnLabel: resPart };
+  const lastColon = rawLabel.lastIndexOf(":");
+  if (lastColon > 0 && lastColon < rawLabel.length - 1) {
+    const afterColon = rawLabel.substring(lastColon + 1);
+    if (!afterColon.startsWith("//")) {
+      const reqPart = rawLabel.substring(0, lastColon).trim();
+      const resPart = afterColon.trim();
+      if (reqPart && resPart) {
+        return { label: reqPart, returnLabel: resPart };
+      }
     }
   }
   return { label: rawLabel };
 }
-function measureIndent(line2) {
+function measureIndent(line3) {
   let indent = 0;
-  for (const ch of line2) {
+  for (const ch of line3) {
     if (ch === " ") indent++;
     else if (ch === "	") indent += 4;
     else break;
@@ -203,13 +210,17 @@ function parseSequenceDgmo(content) {
   }
   const lines = content.split("\n");
   let hasExplicitChart = false;
+  let contentStarted = false;
   let activeGroup = null;
+  const participantGroupMap = /* @__PURE__ */ new Map();
   const blockStack = [];
   const currentContainer = () => {
     if (blockStack.length === 0) return result.elements;
     const top = blockStack[blockStack.length - 1];
+    if (top.activeElseIfBranch) return top.activeElseIfBranch.children;
     return top.inElse ? top.block.elseChildren : top.block.children;
   };
+  let lastMsgFrom = null;
   for (let i = 0; i < lines.length; i++) {
     const raw = lines[i];
     const trimmed = raw.trim();
@@ -220,9 +231,15 @@ function parseSequenceDgmo(content) {
     }
     const groupMatch = trimmed.match(GROUP_HEADING_PATTERN);
     if (groupMatch) {
+      const groupColor = groupMatch[2]?.trim();
+      if (groupColor && groupColor.startsWith("#")) {
+        result.error = `Line ${lineNumber}: Use a named color instead of hex (e.g., blue, red, teal)`;
+        return result;
+      }
+      contentStarted = true;
       activeGroup = {
-        name: groupMatch[1],
-        color: groupMatch[2] || void 0,
+        name: groupMatch[1].trim(),
+        color: groupColor || void 0,
         participantIds: [],
         lineNumber
       };
@@ -232,7 +249,11 @@ function parseSequenceDgmo(content) {
     if (activeGroup && measureIndent(raw) === 0) {
       activeGroup = null;
     }
-    if (trimmed.startsWith("#") || trimmed.startsWith("//")) continue;
+    if (trimmed.startsWith("//")) continue;
+    if (trimmed.startsWith("#") && !trimmed.startsWith("##")) {
+      result.error = `Line ${lineNumber}: Use // for comments. # is reserved for group headings (##)`;
+      return result;
+    }
     const sectionMatch = trimmed.match(SECTION_PATTERN);
     if (sectionMatch) {
       const sectionIndent = measureIndent(raw);
@@ -242,11 +263,16 @@ function parseSequenceDgmo(content) {
         blockStack.pop();
       }
       const labelRaw = sectionMatch[1].trim();
-      const colorMatch = labelRaw.match(/^(.+?)\((\w+)\)$/);
+      const colorMatch = labelRaw.match(/^(.+?)\(([^)]+)\)$/);
+      if (colorMatch && colorMatch[2].trim().startsWith("#")) {
+        result.error = `Line ${lineNumber}: Use a named color instead of hex (e.g., blue, red, teal)`;
+        return result;
+      }
+      contentStarted = true;
       const section = {
         kind: "section",
         label: colorMatch ? colorMatch[1].trim() : labelRaw,
-        color: colorMatch ? colorMatch[2] : void 0,
+        color: colorMatch ? colorMatch[2].trim() : void 0,
         lineNumber
       };
       result.sections.push(section);
@@ -256,24 +282,32 @@ function parseSequenceDgmo(content) {
     const colonIndex = trimmed.indexOf(":");
     if (colonIndex > 0 && !trimmed.includes("->") && !trimmed.includes("~>")) {
       const key = trimmed.substring(0, colonIndex).trim().toLowerCase();
-      const value = trimmed.substring(colonIndex + 1).trim();
-      if (key === "chart") {
-        hasExplicitChart = true;
-        if (value.toLowerCase() !== "sequence") {
-          result.error = `Expected chart type "sequence", got "${value}"`;
+      if (key === "note" || key.startsWith("note ")) {
+      } else {
+        const value = trimmed.substring(colonIndex + 1).trim();
+        if (key === "chart") {
+          hasExplicitChart = true;
+          if (value.toLowerCase() !== "sequence") {
+            result.error = `Expected chart type "sequence", got "${value}"`;
+            return result;
+          }
+          continue;
+        }
+        if (contentStarted) {
+          result.error = `Line ${lineNumber}: Options like '${key}: ${value}' must appear before the first message or declaration`;
           return result;
         }
+        if (key === "title") {
+          result.title = value;
+          continue;
+        }
+        result.options[key] = value;
         continue;
       }
-      if (key === "title") {
-        result.title = value;
-        continue;
-      }
-      result.options[key] = value;
-      continue;
     }
     const isAMatch = trimmed.match(IS_A_PATTERN);
     if (isAMatch) {
+      contentStarted = true;
       const id = isAMatch[1];
       const typeStr = isAMatch[2].toLowerCase();
       const remainder = isAMatch[3]?.trim() || "";
@@ -296,12 +330,19 @@ function parseSequenceDgmo(content) {
         });
       }
       if (activeGroup && !activeGroup.participantIds.includes(id)) {
+        const existingGroup = participantGroupMap.get(id);
+        if (existingGroup) {
+          result.error = `Line ${lineNumber}: Participant '${id}' is already in group '${existingGroup}' \u2014 participants can only belong to one group`;
+          return result;
+        }
         activeGroup.participantIds.push(id);
+        participantGroupMap.set(id, activeGroup.name);
       }
       continue;
     }
     const posOnlyMatch = trimmed.match(POSITION_ONLY_PATTERN);
     if (posOnlyMatch) {
+      contentStarted = true;
       const id = posOnlyMatch[1];
       const position = parseInt(posOnlyMatch[2], 10);
       if (!result.participants.some((p) => p.id === id)) {
@@ -314,11 +355,18 @@ function parseSequenceDgmo(content) {
         });
       }
       if (activeGroup && !activeGroup.participantIds.includes(id)) {
+        const existingGroup = participantGroupMap.get(id);
+        if (existingGroup) {
+          result.error = `Line ${lineNumber}: Participant '${id}' is already in group '${existingGroup}' \u2014 participants can only belong to one group`;
+          return result;
+        }
         activeGroup.participantIds.push(id);
+        participantGroupMap.set(id, activeGroup.name);
       }
       continue;
     }
     if (activeGroup && measureIndent(raw) > 0 && /^\S+$/.test(trimmed)) {
+      contentStarted = true;
       const id = trimmed;
       if (!result.participants.some((p) => p.id === id)) {
         result.participants.push({
@@ -329,7 +377,13 @@ function parseSequenceDgmo(content) {
         });
       }
       if (!activeGroup.participantIds.includes(id)) {
+        const existingGroup = participantGroupMap.get(id);
+        if (existingGroup) {
+          result.error = `Line ${lineNumber}: Participant '${id}' is already in group '${existingGroup}' \u2014 participants can only belong to one group`;
+          return result;
+        }
         activeGroup.participantIds.push(id);
+        participantGroupMap.set(id, activeGroup.name);
       }
       continue;
     }
@@ -337,28 +391,31 @@ function parseSequenceDgmo(content) {
     while (blockStack.length > 0) {
       const top = blockStack[blockStack.length - 1];
       if (indent > top.indent) break;
-      if (indent === top.indent && trimmed.toLowerCase() === "else" && top.block.type === "if")
-        break;
+      if (indent === top.indent && (top.block.type === "if" || top.block.type === "parallel")) {
+        const lower = trimmed.toLowerCase();
+        if (lower === "else" || lower.startsWith("else if ")) break;
+      }
       blockStack.pop();
     }
-    let isAsync = false;
-    let arrowLine = trimmed;
     const asyncPrefixMatch = trimmed.match(/^async\s+(.+)$/i);
-    if (asyncPrefixMatch) {
-      isAsync = true;
-      arrowLine = asyncPrefixMatch[1];
+    if (asyncPrefixMatch && ARROW_PATTERN.test(asyncPrefixMatch[1])) {
+      result.error = `Line ${lineNumber}: Use ~> for async messages: A ~> B: message`;
+      return result;
     }
-    const asyncArrowMatch = arrowLine.match(
+    let isAsync = false;
+    const asyncArrowMatch = trimmed.match(
       /^(\S+)\s*~>\s*([^\s:]+)\s*(?::\s*(.+))?$/
     );
-    const syncArrowMatch = arrowLine.match(
+    const syncArrowMatch = trimmed.match(
       /^(\S+)\s*->\s*([^\s:]+)\s*(?::\s*(.+))?$/
     );
     const arrowMatch = asyncArrowMatch || syncArrowMatch;
     if (asyncArrowMatch) isAsync = true;
     if (arrowMatch) {
+      contentStarted = true;
       const from = arrowMatch[1];
       const to = arrowMatch[2];
+      lastMsgFrom = from;
       const rawLabel = arrowMatch[3]?.trim() || "";
       const { label, returnLabel } = isAsync ? { label: rawLabel, returnLabel: void 0 } : parseReturnLabel(rawLabel);
       const msg = {
@@ -391,6 +448,7 @@ function parseSequenceDgmo(content) {
     }
     const ifMatch = trimmed.match(/^if\s+(.+)$/i);
     if (ifMatch) {
+      contentStarted = true;
       const block = {
         kind: "block",
         type: "if",
@@ -405,6 +463,7 @@ function parseSequenceDgmo(content) {
     }
     const loopMatch = trimmed.match(/^loop\s+(.+)$/i);
     if (loopMatch) {
+      contentStarted = true;
       const block = {
         kind: "block",
         type: "loop",
@@ -419,6 +478,7 @@ function parseSequenceDgmo(content) {
     }
     const parallelMatch = trimmed.match(/^parallel(?:\s+(.+))?$/i);
     if (parallelMatch) {
+      contentStarted = true;
       const block = {
         kind: "block",
         type: "parallel",
@@ -431,15 +491,97 @@ function parseSequenceDgmo(content) {
       blockStack.push({ block, indent, inElse: false });
       continue;
     }
+    const elseIfMatch = trimmed.match(/^else\s+if\s+(.+)$/i);
+    if (elseIfMatch) {
+      if (blockStack.length > 0 && blockStack[blockStack.length - 1].indent === indent) {
+        const top = blockStack[blockStack.length - 1];
+        if (top.block.type === "parallel") {
+          result.error = `Line ${lineNumber}: parallel blocks don't support else if \u2014 list all concurrent messages directly inside the block`;
+          return result;
+        }
+        if (top.block.type === "if") {
+          const branch = { label: elseIfMatch[1].trim(), children: [] };
+          if (!top.block.elseIfBranches) top.block.elseIfBranches = [];
+          top.block.elseIfBranches.push(branch);
+          top.activeElseIfBranch = branch;
+          top.inElse = false;
+        }
+      }
+      continue;
+    }
     if (trimmed.toLowerCase() === "else") {
-      if (blockStack.length > 0 && blockStack[blockStack.length - 1].indent === indent && blockStack[blockStack.length - 1].block.type === "if") {
-        blockStack[blockStack.length - 1].inElse = true;
+      if (blockStack.length > 0 && blockStack[blockStack.length - 1].indent === indent) {
+        const top = blockStack[blockStack.length - 1];
+        if (top.block.type === "parallel") {
+          result.error = `Line ${lineNumber}: parallel blocks don't support else \u2014 list all concurrent messages directly inside the block`;
+          return result;
+        }
+        if (top.block.type === "if") {
+          top.inElse = true;
+          top.activeElseIfBranch = void 0;
+        }
       }
       continue;
     }
+    const noteSingleMatch = trimmed.match(NOTE_SINGLE);
+    if (noteSingleMatch) {
+      const notePosition = noteSingleMatch[1]?.toLowerCase() || "right";
+      let noteParticipant = noteSingleMatch[2] || null;
+      if (!noteParticipant) {
+        if (!lastMsgFrom) continue;
+        noteParticipant = lastMsgFrom;
+      }
+      if (!result.participants.some((p) => p.id === noteParticipant)) {
+        continue;
+      }
+      const note = {
+        kind: "note",
+        text: noteSingleMatch[3].trim(),
+        position: notePosition,
+        participantId: noteParticipant,
+        lineNumber,
+        endLineNumber: lineNumber
+      };
+      currentContainer().push(note);
+      continue;
+    }
+    const noteMultiMatch = trimmed.match(NOTE_MULTI);
+    if (noteMultiMatch) {
+      const notePosition = noteMultiMatch[1]?.toLowerCase() || "right";
+      let noteParticipant = noteMultiMatch[2] || null;
+      if (!noteParticipant) {
+        if (!lastMsgFrom) continue;
+        noteParticipant = lastMsgFrom;
+      }
+      if (!result.participants.some((p) => p.id === noteParticipant)) {
+        continue;
+      }
+      const noteLines = [];
+      while (i + 1 < lines.length) {
+        const nextRaw = lines[i + 1];
+        const nextTrimmed = nextRaw.trim();
+        if (!nextTrimmed) break;
+        const nextIndent = measureIndent(nextRaw);
+        if (nextIndent <= indent) break;
+        noteLines.push(nextTrimmed);
+        i++;
+      }
+      if (noteLines.length === 0) continue;
+      const note = {
+        kind: "note",
+        text: noteLines.join("\n"),
+        position: notePosition,
+        participantId: noteParticipant,
+        lineNumber,
+        endLineNumber: i + 1
+        // i has advanced past the body lines (1-based)
+      };
+      currentContainer().push(note);
+      continue;
+    }
   }
   if (!hasExplicitChart && result.messages.length === 0) {
-    const hasArrows = lines.some((line2) => ARROW_PATTERN.test(line2.trim()));
+    const hasArrows = lines.some((line3) => ARROW_PATTERN.test(line3.trim()));
     if (!hasArrows) {
       result.error = 'No "chart: sequence" header and no sequence content detected';
       return result;
@@ -450,13 +592,13 @@ function parseSequenceDgmo(content) {
 function looksLikeSequence(content) {
   if (!content) return false;
   const lines = content.split("\n");
-  return lines.some((line2) => {
-    const trimmed = line2.trim();
-    if (trimmed.startsWith("#") || trimmed.startsWith("//")) return false;
+  return lines.some((line3) => {
+    const trimmed = line3.trim();
+    if (trimmed.startsWith("//")) return false;
     return ARROW_PATTERN.test(trimmed);
   });
 }
-var VALID_PARTICIPANT_TYPES, IS_A_PATTERN, POSITION_ONLY_PATTERN, GROUP_HEADING_PATTERN, SECTION_PATTERN, ARROW_PATTERN, ARROW_RETURN_PATTERN, UML_RETURN_PATTERN;
+var VALID_PARTICIPANT_TYPES, IS_A_PATTERN, POSITION_ONLY_PATTERN, GROUP_HEADING_PATTERN, SECTION_PATTERN, ARROW_PATTERN, ARROW_RETURN_PATTERN, UML_RETURN_PATTERN, NOTE_SINGLE, NOTE_MULTI;
 var init_parser = __esm({
   "src/sequence/parser.ts"() {
     "use strict";
@@ -474,11 +616,13 @@ var init_parser = __esm({
     ]);
     IS_A_PATTERN = /^(\S+)\s+is\s+an?\s+(\w+)(?:\s+(.+))?$/i;
     POSITION_ONLY_PATTERN = /^(\S+)\s+position\s+(-?\d+)$/i;
-    GROUP_HEADING_PATTERN = /^##\s+(\S+?)(?:\((\w+)\))?$/;
-    SECTION_PATTERN = /^==\s+(.+?)\s*==$/;
+    GROUP_HEADING_PATTERN = /^##\s+(.+?)(?:\(([^)]+)\))?\s*$/;
+    SECTION_PATTERN = /^==\s+(.+?)(?:\s*==)?\s*$/;
     ARROW_PATTERN = /\S+\s*(?:->|~>)\s*\S+/;
     ARROW_RETURN_PATTERN = /^(.+?)\s*<-\s*(.+)$/;
     UML_RETURN_PATTERN = /^(\w+\([^)]*\))\s*:\s*(.+)$/;
+    NOTE_SINGLE = /^note(?:\s+(right|left)\s+of\s+(\S+))?\s*:\s*(.+)$/i;
+    NOTE_MULTI = /^note(?:\s+(right|left)\s+of\s+([^\s:]+))?\s*:?\s*$/i;
   }
 });
 
@@ -557,6 +701,369 @@ var init_colors = __esm({
   }
 });
 
+// src/graph/flowchart-parser.ts
+var flowchart_parser_exports = {};
+__export(flowchart_parser_exports, {
+  looksLikeFlowchart: () => looksLikeFlowchart,
+  parseFlowchart: () => parseFlowchart
+});
+function measureIndent2(line3) {
+  let indent = 0;
+  for (const ch of line3) {
+    if (ch === " ") indent++;
+    else if (ch === "	") indent += 4;
+    else break;
+  }
+  return indent;
+}
+function nodeId(shape, label) {
+  return `${shape}:${label.toLowerCase().trim()}`;
+}
+function extractColor(label, palette) {
+  const m = label.match(COLOR_SUFFIX_RE);
+  if (!m) return { label };
+  const colorName = m[1].trim();
+  return {
+    label: label.substring(0, m.index).trim(),
+    color: resolveColor(colorName, palette)
+  };
+}
+function parseNodeRef(text, palette) {
+  const t = text.trim();
+  if (!t) return null;
+  let m = t.match(/^\[\[([^\]]+)\]\]$/);
+  if (m) {
+    const { label, color } = extractColor(m[1].trim(), palette);
+    return { id: nodeId("subroutine", label), label, shape: "subroutine", color };
+  }
+  m = t.match(/^\[([^\]]+)~\]$/);
+  if (m) {
+    const { label, color } = extractColor(m[1].trim(), palette);
+    return { id: nodeId("document", label), label, shape: "document", color };
+  }
+  m = t.match(/^\[([^\]]+)\]$/);
+  if (m) {
+    const { label, color } = extractColor(m[1].trim(), palette);
+    return { id: nodeId("process", label), label, shape: "process", color };
+  }
+  m = t.match(/^\((.+)\)$/);
+  if (m) {
+    const { label, color } = extractColor(m[1].trim(), palette);
+    return { id: nodeId("terminal", label), label, shape: "terminal", color };
+  }
+  m = t.match(/^<([^>]+)>$/);
+  if (m) {
+    const { label, color } = extractColor(m[1].trim(), palette);
+    return { id: nodeId("decision", label), label, shape: "decision", color };
+  }
+  m = t.match(/^\/([^/]+)\/$/);
+  if (m) {
+    const { label, color } = extractColor(m[1].trim(), palette);
+    return { id: nodeId("io", label), label, shape: "io", color };
+  }
+  return null;
+}
+function splitArrows(line3) {
+  const segments = [];
+  const arrowRe = /(?:^|\s)-([^>\s(][^(>]*?)?\s*(?:\(([^)]+)\))?\s*->|(?:^|\s)->/g;
+  let lastIndex = 0;
+  const arrowPositions = [];
+  let searchFrom = 0;
+  while (searchFrom < line3.length) {
+    const idx = line3.indexOf("->", searchFrom);
+    if (idx === -1) break;
+    let arrowStart = idx;
+    let label;
+    let color;
+    if (idx > 0 && line3[idx - 1] !== " " && line3[idx - 1] !== "	") {
+      let scanBack = idx - 1;
+      while (scanBack > 0 && line3[scanBack] !== "-") {
+        scanBack--;
+      }
+      if (line3[scanBack] === "-" && (scanBack === 0 || /\s/.test(line3[scanBack - 1]))) {
+        let arrowContent = line3.substring(scanBack + 1, idx);
+        if (arrowContent.endsWith("-")) arrowContent = arrowContent.slice(0, -1);
+        const colorMatch = arrowContent.match(/\(([^)]+)\)\s*$/);
+        if (colorMatch) {
+          color = colorMatch[1].trim();
+          const labelPart = arrowContent.substring(0, colorMatch.index).trim();
+          if (labelPart) label = labelPart;
+        } else {
+          const labelPart = arrowContent.trim();
+          if (labelPart) label = labelPart;
+        }
+        arrowStart = scanBack;
+      }
+    }
+    arrowPositions.push({ start: arrowStart, end: idx + 2, label, color });
+    searchFrom = idx + 2;
+  }
+  if (arrowPositions.length === 0) {
+    return [line3];
+  }
+  for (let i = 0; i < arrowPositions.length; i++) {
+    const arrow = arrowPositions[i];
+    const beforeText = line3.substring(lastIndex, arrow.start).trim();
+    if (beforeText || i === 0) {
+      segments.push(beforeText);
+    }
+    let arrowToken = "->";
+    if (arrow.label && arrow.color) arrowToken = `-${arrow.label}(${arrow.color})->`;
+    else if (arrow.label) arrowToken = `-${arrow.label}->`;
+    else if (arrow.color) arrowToken = `-(${arrow.color})->`;
+    segments.push(arrowToken);
+    lastIndex = arrow.end;
+  }
+  const remaining = line3.substring(lastIndex).trim();
+  if (remaining) {
+    segments.push(remaining);
+  }
+  return segments;
+}
+function parseArrowToken(token, palette) {
+  if (token === "->") return {};
+  const colorOnly = token.match(/^-\(([^)]+)\)->$/);
+  if (colorOnly) {
+    return { color: resolveColor(colorOnly[1].trim(), palette) };
+  }
+  const m = token.match(/^-(.+?)(?:\(([^)]+)\))?->$/);
+  if (m) {
+    const label = m[1]?.trim() || void 0;
+    const color = m[2] ? resolveColor(m[2].trim(), palette) : void 0;
+    return { label, color };
+  }
+  return {};
+}
+function parseFlowchart(content, palette) {
+  const lines = content.split("\n");
+  const result = {
+    type: "flowchart",
+    direction: "TB",
+    nodes: [],
+    edges: []
+  };
+  const nodeMap = /* @__PURE__ */ new Map();
+  const indentStack = [];
+  let currentGroup = null;
+  const groups = [];
+  let contentStarted = false;
+  function getOrCreateNode(ref, lineNumber) {
+    const existing = nodeMap.get(ref.id);
+    if (existing) return existing;
+    const node = {
+      id: ref.id,
+      label: ref.label,
+      shape: ref.shape,
+      lineNumber,
+      ...ref.color && { color: ref.color },
+      ...currentGroup && { group: currentGroup.id }
+    };
+    nodeMap.set(ref.id, node);
+    result.nodes.push(node);
+    if (currentGroup && !currentGroup.nodeIds.includes(ref.id)) {
+      currentGroup.nodeIds.push(ref.id);
+    }
+    return node;
+  }
+  function addEdge(sourceId, targetId, lineNumber, label, color) {
+    const edge = {
+      source: sourceId,
+      target: targetId,
+      lineNumber,
+      ...label && { label },
+      ...color && { color }
+    };
+    result.edges.push(edge);
+  }
+  function processContentLine(trimmed, lineNumber, indent) {
+    contentStarted = true;
+    while (indentStack.length > 0) {
+      const top = indentStack[indentStack.length - 1];
+      if (top.indent >= indent) {
+        indentStack.pop();
+      } else {
+        break;
+      }
+    }
+    const implicitSourceId = indentStack.length > 0 ? indentStack[indentStack.length - 1].nodeId : null;
+    const segments = splitArrows(trimmed);
+    if (segments.length === 1) {
+      const ref = parseNodeRef(segments[0], palette);
+      if (ref) {
+        const node = getOrCreateNode(ref, lineNumber);
+        indentStack.push({ nodeId: node.id, indent });
+        return node.id;
+      }
+      return null;
+    }
+    let lastNodeId = null;
+    let pendingArrow = null;
+    for (let i = 0; i < segments.length; i++) {
+      const seg = segments[i];
+      if (seg === "->" || /^-.+->$/.test(seg)) {
+        pendingArrow = parseArrowToken(seg, palette);
+        continue;
+      }
+      const ref = parseNodeRef(seg, palette);
+      if (!ref) continue;
+      const node = getOrCreateNode(ref, lineNumber);
+      if (pendingArrow !== null) {
+        const sourceId = lastNodeId ?? implicitSourceId;
+        if (sourceId) {
+          addEdge(
+            sourceId,
+            node.id,
+            lineNumber,
+            pendingArrow.label,
+            pendingArrow.color
+          );
+        }
+        pendingArrow = null;
+      } else if (lastNodeId === null && implicitSourceId === null) {
+      }
+      lastNodeId = node.id;
+    }
+    if (pendingArrow !== null && lastNodeId === null && implicitSourceId) {
+    }
+    if (segments.length >= 2 && segments[0] === "" && implicitSourceId && lastNodeId) {
+    }
+    if (lastNodeId) {
+      indentStack.push({ nodeId: lastNodeId, indent });
+    }
+    return lastNodeId;
+  }
+  for (let i = 0; i < lines.length; i++) {
+    const raw = lines[i];
+    const trimmed = raw.trim();
+    const lineNumber = i + 1;
+    const indent = measureIndent2(raw);
+    if (!trimmed) continue;
+    if (trimmed.startsWith("//")) continue;
+    const groupMatch = trimmed.match(GROUP_HEADING_RE);
+    if (groupMatch) {
+      const groupLabel = groupMatch[1].trim();
+      const groupColorName = groupMatch[2]?.trim();
+      const groupColor = groupColorName ? resolveColor(groupColorName, palette) : void 0;
+      currentGroup = {
+        id: `group:${groupLabel.toLowerCase()}`,
+        label: groupLabel,
+        nodeIds: [],
+        lineNumber,
+        ...groupColor && { color: groupColor }
+      };
+      groups.push(currentGroup);
+      continue;
+    }
+    if (!contentStarted && trimmed.includes(":") && !trimmed.includes("->")) {
+      const colonIdx = trimmed.indexOf(":");
+      const key = trimmed.substring(0, colonIdx).trim().toLowerCase();
+      const value = trimmed.substring(colonIdx + 1).trim();
+      if (key === "chart") {
+        if (value.toLowerCase() !== "flowchart") {
+          result.error = `Line ${lineNumber}: Expected chart type "flowchart", got "${value}"`;
+          return result;
+        }
+        continue;
+      }
+      if (key === "title") {
+        result.title = value;
+        continue;
+      }
+      if (key === "direction") {
+        const dir = value.toUpperCase();
+        if (dir === "TB" || dir === "LR") {
+          result.direction = dir;
+        }
+        continue;
+      }
+      continue;
+    }
+    processContentLine(trimmed, lineNumber, indent);
+  }
+  if (groups.length > 0) result.groups = groups;
+  if (result.nodes.length === 0 && !result.error) {
+    result.error = "No nodes found. Add flowchart content with shape syntax like [Process] or (Start).";
+  }
+  return result;
+}
+function looksLikeFlowchart(content) {
+  if (!content.includes("->")) return false;
+  const hasShapeDelimiter = /\[[^\]]+\]/.test(content) || /\([^)]+\)/.test(content) || /<[^>]+>/.test(content) || /\/[^/]+\//.test(content);
+  if (!hasShapeDelimiter) return false;
+  const shapeNearArrow = /[\])][ \t]*-.*->/.test(content) || // shape ] or ) followed by arrow
+  /->[ \t]*[\[(<\/]/.test(content);
+  return shapeNearArrow;
+}
+var COLOR_SUFFIX_RE, GROUP_HEADING_RE;
+var init_flowchart_parser = __esm({
+  "src/graph/flowchart-parser.ts"() {
+    "use strict";
+    init_colors();
+    COLOR_SUFFIX_RE = /\(([^)]+)\)\s*$/;
+    GROUP_HEADING_RE = /^##\s+(.+?)(?:\(([^)]+)\))?\s*$/;
+  }
+});
+
+// src/dgmo-router.ts
+var dgmo_router_exports = {};
+__export(dgmo_router_exports, {
+  DGMO_CHART_TYPE_MAP: () => DGMO_CHART_TYPE_MAP,
+  getDgmoFramework: () => getDgmoFramework,
+  parseDgmoChartType: () => parseDgmoChartType
+});
+function getDgmoFramework(chartType) {
+  return DGMO_CHART_TYPE_MAP[chartType.toLowerCase()] ?? null;
+}
+function parseDgmoChartType(content) {
+  const lines = content.split("\n");
+  for (const line3 of lines) {
+    const trimmed = line3.trim();
+    if (!trimmed || trimmed.startsWith("#") || trimmed.startsWith("//"))
+      continue;
+    const match = trimmed.match(/^chart\s*:\s*(.+)/i);
+    if (match) return match[1].trim().toLowerCase();
+  }
+  if (looksLikeSequence(content)) return "sequence";
+  if (looksLikeFlowchart(content)) return "flowchart";
+  return null;
+}
+var DGMO_CHART_TYPE_MAP;
+var init_dgmo_router = __esm({
+  "src/dgmo-router.ts"() {
+    "use strict";
+    init_parser();
+    init_flowchart_parser();
+    DGMO_CHART_TYPE_MAP = {
+      // Standard charts (via ECharts)
+      bar: "echart",
+      line: "echart",
+      "multi-line": "echart",
+      area: "echart",
+      pie: "echart",
+      doughnut: "echart",
+      radar: "echart",
+      "polar-area": "echart",
+      "bar-stacked": "echart",
+      // ECharts
+      scatter: "echart",
+      sankey: "echart",
+      chord: "echart",
+      function: "echart",
+      heatmap: "echart",
+      funnel: "echart",
+      // D3
+      slope: "d3",
+      wordcloud: "d3",
+      arc: "d3",
+      timeline: "d3",
+      venn: "d3",
+      quadrant: "d3",
+      sequence: "d3",
+      flowchart: "d3"
+    };
+  }
+});
+
 // src/fonts.ts
 var FONT_FAMILY;
 var init_fonts = __esm({
@@ -1612,6 +2119,409 @@ var init_palettes = __esm({
   }
 });
 
+// src/graph/layout.ts
+var layout_exports = {};
+__export(layout_exports, {
+  layoutGraph: () => layoutGraph
+});
+import dagre from "@dagrejs/dagre";
+function computeNodeWidth(label, shape) {
+  const base = Math.max(120, label.length * 9 + 40);
+  if (shape === "subroutine") return base + 10;
+  return base;
+}
+function computeNodeHeight(shape) {
+  return shape === "decision" ? 60 : 50;
+}
+function layoutGraph(graph) {
+  if (graph.nodes.length === 0) {
+    return { nodes: [], edges: [], groups: [], width: 0, height: 0 };
+  }
+  const g = new dagre.graphlib.Graph({ compound: true });
+  g.setGraph({
+    rankdir: graph.direction,
+    nodesep: 50,
+    ranksep: 60,
+    edgesep: 20
+  });
+  g.setDefaultEdgeLabel(() => ({}));
+  const nodeDataMap = /* @__PURE__ */ new Map();
+  for (const node of graph.nodes) {
+    nodeDataMap.set(node.id, node);
+  }
+  if (graph.groups) {
+    for (const group of graph.groups) {
+      g.setNode(group.id, {
+        label: group.label,
+        clusterLabelPos: "top"
+      });
+    }
+  }
+  for (const node of graph.nodes) {
+    const width = computeNodeWidth(node.label, node.shape);
+    const height = computeNodeHeight(node.shape);
+    g.setNode(node.id, { label: node.label, width, height });
+    if (node.group && graph.groups?.some((gr) => gr.id === node.group)) {
+      g.setParent(node.id, node.group);
+    }
+  }
+  const edgeDataMap = /* @__PURE__ */ new Map();
+  for (const edge of graph.edges) {
+    const key = `${edge.source}->${edge.target}`;
+    edgeDataMap.set(key, edge);
+    g.setEdge(edge.source, edge.target, {
+      label: edge.label ?? ""
+    });
+  }
+  dagre.layout(g);
+  const layoutNodes = graph.nodes.map((node) => {
+    const pos = g.node(node.id);
+    return {
+      id: node.id,
+      label: node.label,
+      shape: node.shape,
+      color: node.color,
+      group: node.group,
+      lineNumber: node.lineNumber,
+      x: pos.x,
+      y: pos.y,
+      width: pos.width,
+      height: pos.height
+    };
+  });
+  const layoutEdges = graph.edges.map((edge) => {
+    const edgeData = g.edge(edge.source, edge.target);
+    return {
+      source: edge.source,
+      target: edge.target,
+      points: edgeData?.points ?? [],
+      label: edge.label,
+      color: edge.color,
+      lineNumber: edge.lineNumber
+    };
+  });
+  const layoutGroups = [];
+  if (graph.groups) {
+    const nodeMap = new Map(layoutNodes.map((n) => [n.id, n]));
+    for (const group of graph.groups) {
+      const members = group.nodeIds.map((id) => nodeMap.get(id)).filter((n) => n !== void 0);
+      if (members.length === 0) {
+        layoutGroups.push({
+          id: group.id,
+          label: group.label,
+          color: group.color,
+          x: 0,
+          y: 0,
+          width: 0,
+          height: 0
+        });
+        continue;
+      }
+      let minX = Infinity;
+      let minY = Infinity;
+      let maxX = -Infinity;
+      let maxY = -Infinity;
+      for (const member of members) {
+        const left = member.x - member.width / 2;
+        const right = member.x + member.width / 2;
+        const top = member.y - member.height / 2;
+        const bottom = member.y + member.height / 2;
+        if (left < minX) minX = left;
+        if (right > maxX) maxX = right;
+        if (top < minY) minY = top;
+        if (bottom > maxY) maxY = bottom;
+      }
+      layoutGroups.push({
+        id: group.id,
+        label: group.label,
+        color: group.color,
+        x: minX - GROUP_PADDING,
+        y: minY - GROUP_PADDING,
+        width: maxX - minX + GROUP_PADDING * 2,
+        height: maxY - minY + GROUP_PADDING * 2
+      });
+    }
+  }
+  let totalWidth = 0;
+  let totalHeight = 0;
+  for (const node of layoutNodes) {
+    const right = node.x + node.width / 2;
+    const bottom = node.y + node.height / 2;
+    if (right > totalWidth) totalWidth = right;
+    if (bottom > totalHeight) totalHeight = bottom;
+  }
+  for (const group of layoutGroups) {
+    const right = group.x + group.width;
+    const bottom = group.y + group.height;
+    if (right > totalWidth) totalWidth = right;
+    if (bottom > totalHeight) totalHeight = bottom;
+  }
+  totalWidth += 40;
+  totalHeight += 40;
+  return {
+    nodes: layoutNodes,
+    edges: layoutEdges,
+    groups: layoutGroups,
+    width: totalWidth,
+    height: totalHeight
+  };
+}
+var GROUP_PADDING;
+var init_layout = __esm({
+  "src/graph/layout.ts"() {
+    "use strict";
+    GROUP_PADDING = 20;
+  }
+});
+
+// src/graph/flowchart-renderer.ts
+var flowchart_renderer_exports = {};
+__export(flowchart_renderer_exports, {
+  renderFlowchart: () => renderFlowchart,
+  renderFlowchartForExport: () => renderFlowchartForExport
+});
+import * as d3Selection from "d3-selection";
+import * as d3Shape from "d3-shape";
+function mix(a, b, pct) {
+  const parse = (h) => {
+    const r = h.replace("#", "");
+    const f = r.length === 3 ? r[0] + r[0] + r[1] + r[1] + r[2] + r[2] : r;
+    return [parseInt(f.substring(0, 2), 16), parseInt(f.substring(2, 4), 16), parseInt(f.substring(4, 6), 16)];
+  };
+  const [ar, ag, ab] = parse(a), [br, bg, bb] = parse(b), t = pct / 100;
+  const c = (x, y) => Math.round(x * t + y * (1 - t)).toString(16).padStart(2, "0");
+  return `#${c(ar, br)}${c(ag, bg)}${c(ab, bb)}`;
+}
+function nodeFill(palette, isDark, nodeColor) {
+  if (nodeColor) {
+    return mix(nodeColor, isDark ? palette.surface : palette.bg, 25);
+  }
+  return mix(palette.primary, isDark ? palette.surface : palette.bg, 15);
+}
+function nodeStroke(palette, nodeColor) {
+  return nodeColor ?? palette.textMuted;
+}
+function renderTerminal(g, node, palette, isDark) {
+  const w = node.width;
+  const h = node.height;
+  const rx = h / 2;
+  g.append("rect").attr("x", -w / 2).attr("y", -h / 2).attr("width", w).attr("height", h).attr("rx", rx).attr("ry", rx).attr("fill", nodeFill(palette, isDark, node.color)).attr("stroke", nodeStroke(palette, node.color)).attr("stroke-width", NODE_STROKE_WIDTH);
+}
+function renderProcess(g, node, palette, isDark) {
+  const w = node.width;
+  const h = node.height;
+  g.append("rect").attr("x", -w / 2).attr("y", -h / 2).attr("width", w).attr("height", h).attr("rx", 3).attr("ry", 3).attr("fill", nodeFill(palette, isDark, node.color)).attr("stroke", nodeStroke(palette, node.color)).attr("stroke-width", NODE_STROKE_WIDTH);
+}
+function renderDecision(g, node, palette, isDark) {
+  const w = node.width / 2;
+  const h = node.height / 2;
+  const points = [
+    `${0},${-h}`,
+    // top
+    `${w},${0}`,
+    // right
+    `${0},${h}`,
+    // bottom
+    `${-w},${0}`
+    // left
+  ].join(" ");
+  g.append("polygon").attr("points", points).attr("fill", nodeFill(palette, isDark, node.color)).attr("stroke", nodeStroke(palette, node.color)).attr("stroke-width", NODE_STROKE_WIDTH);
+}
+function renderIO(g, node, palette, isDark) {
+  const w = node.width / 2;
+  const h = node.height / 2;
+  const sk = IO_SKEW;
+  const points = [
+    `${-w + sk},${-h}`,
+    // top-left (shifted right)
+    `${w + sk},${-h}`,
+    // top-right (shifted right)
+    `${w - sk},${h}`,
+    // bottom-right (shifted left)
+    `${-w - sk},${h}`
+    // bottom-left (shifted left)
+  ].join(" ");
+  g.append("polygon").attr("points", points).attr("fill", nodeFill(palette, isDark, node.color)).attr("stroke", nodeStroke(palette, node.color)).attr("stroke-width", NODE_STROKE_WIDTH);
+}
+function renderSubroutine(g, node, palette, isDark) {
+  const w = node.width;
+  const h = node.height;
+  const s = nodeStroke(palette, node.color);
+  g.append("rect").attr("x", -w / 2).attr("y", -h / 2).attr("width", w).attr("height", h).attr("rx", 3).attr("ry", 3).attr("fill", nodeFill(palette, isDark, node.color)).attr("stroke", s).attr("stroke-width", NODE_STROKE_WIDTH);
+  g.append("line").attr("x1", -w / 2 + SUBROUTINE_INSET).attr("y1", -h / 2).attr("x2", -w / 2 + SUBROUTINE_INSET).attr("y2", h / 2).attr("stroke", s).attr("stroke-width", NODE_STROKE_WIDTH);
+  g.append("line").attr("x1", w / 2 - SUBROUTINE_INSET).attr("y1", -h / 2).attr("x2", w / 2 - SUBROUTINE_INSET).attr("y2", h / 2).attr("stroke", s).attr("stroke-width", NODE_STROKE_WIDTH);
+}
+function renderDocument(g, node, palette, isDark) {
+  const w = node.width;
+  const h = node.height;
+  const waveH = DOC_WAVE_HEIGHT;
+  const left = -w / 2;
+  const right = w / 2;
+  const top = -h / 2;
+  const bottom = h / 2 - waveH;
+  const d = [
+    `M ${left} ${top}`,
+    `L ${right} ${top}`,
+    `L ${right} ${bottom}`,
+    `C ${right - w * 0.25} ${bottom + waveH * 2}, ${left + w * 0.25} ${bottom - waveH}, ${left} ${bottom}`,
+    "Z"
+  ].join(" ");
+  g.append("path").attr("d", d).attr("fill", nodeFill(palette, isDark, node.color)).attr("stroke", nodeStroke(palette, node.color)).attr("stroke-width", NODE_STROKE_WIDTH);
+}
+function renderNodeShape(g, node, palette, isDark) {
+  switch (node.shape) {
+    case "terminal":
+      renderTerminal(g, node, palette, isDark);
+      break;
+    case "process":
+      renderProcess(g, node, palette, isDark);
+      break;
+    case "decision":
+      renderDecision(g, node, palette, isDark);
+      break;
+    case "io":
+      renderIO(g, node, palette, isDark);
+      break;
+    case "subroutine":
+      renderSubroutine(g, node, palette, isDark);
+      break;
+    case "document":
+      renderDocument(g, node, palette, isDark);
+      break;
+  }
+}
+function renderFlowchart(container, graph, layout, palette, isDark, onClickItem, exportDims) {
+  d3Selection.select(container).selectAll(":not([data-d3-tooltip])").remove();
+  const width = exportDims?.width ?? container.clientWidth;
+  const height = exportDims?.height ?? container.clientHeight;
+  if (width <= 0 || height <= 0) return;
+  const titleOffset = graph.title ? TITLE_HEIGHT : 0;
+  const diagramW = layout.width;
+  const diagramH = layout.height + titleOffset;
+  const scaleX = (width - DIAGRAM_PADDING * 2) / diagramW;
+  const scaleY = (height - DIAGRAM_PADDING * 2) / diagramH;
+  const scale = Math.min(1, scaleX, scaleY);
+  const scaledW = diagramW * scale;
+  const scaledH = diagramH * scale;
+  const offsetX = (width - scaledW) / 2;
+  const offsetY = (height - scaledH) / 2;
+  const svg = d3Selection.select(container).append("svg").attr("width", width).attr("height", height).style("background", palette.bg).style("font-family", FONT_FAMILY);
+  const defs = svg.append("defs");
+  defs.append("marker").attr("id", "fc-arrow").attr("viewBox", `0 0 ${ARROWHEAD_W} ${ARROWHEAD_H}`).attr("refX", ARROWHEAD_W).attr("refY", ARROWHEAD_H / 2).attr("markerWidth", ARROWHEAD_W).attr("markerHeight", ARROWHEAD_H).attr("orient", "auto").append("polygon").attr("points", `0,0 ${ARROWHEAD_W},${ARROWHEAD_H / 2} 0,${ARROWHEAD_H}`).attr("fill", palette.textMuted);
+  const edgeColors = /* @__PURE__ */ new Set();
+  for (const edge of layout.edges) {
+    if (edge.color) edgeColors.add(edge.color);
+  }
+  for (const color of edgeColors) {
+    const id = `fc-arrow-${color.replace("#", "")}`;
+    defs.append("marker").attr("id", id).attr("viewBox", `0 0 ${ARROWHEAD_W} ${ARROWHEAD_H}`).attr("refX", ARROWHEAD_W).attr("refY", ARROWHEAD_H / 2).attr("markerWidth", ARROWHEAD_W).attr("markerHeight", ARROWHEAD_H).attr("orient", "auto").append("polygon").attr("points", `0,0 ${ARROWHEAD_W},${ARROWHEAD_H / 2} 0,${ARROWHEAD_H}`).attr("fill", color);
+  }
+  const mainG = svg.append("g").attr("transform", `translate(${offsetX}, ${offsetY}) scale(${scale})`);
+  if (graph.title) {
+    mainG.append("text").attr("x", diagramW / 2).attr("y", TITLE_FONT_SIZE).attr("text-anchor", "middle").attr("fill", palette.text).attr("font-size", TITLE_FONT_SIZE).attr("font-weight", "bold").attr("class", "fc-title").text(graph.title);
+  }
+  const contentG = mainG.append("g").attr("transform", `translate(0, ${titleOffset})`);
+  for (const group of layout.groups) {
+    if (group.width === 0 && group.height === 0) continue;
+    const gx = group.x - GROUP_EXTRA_PADDING;
+    const gy = group.y - GROUP_EXTRA_PADDING - GROUP_LABEL_FONT_SIZE - 4;
+    const gw = group.width + GROUP_EXTRA_PADDING * 2;
+    const gh = group.height + GROUP_EXTRA_PADDING * 2 + GROUP_LABEL_FONT_SIZE + 4;
+    const fillColor = group.color ? mix(group.color, isDark ? palette.surface : palette.bg, 10) : isDark ? palette.surface : mix(palette.border, palette.bg, 30);
+    const strokeColor = group.color ?? palette.textMuted;
+    contentG.append("rect").attr("x", gx).attr("y", gy).attr("width", gw).attr("height", gh).attr("rx", 6).attr("fill", fillColor).attr("stroke", strokeColor).attr("stroke-width", 1).attr("stroke-opacity", 0.5).attr("class", "fc-group");
+    contentG.append("text").attr("x", gx + 8).attr("y", gy + GROUP_LABEL_FONT_SIZE + 4).attr("fill", strokeColor).attr("font-size", GROUP_LABEL_FONT_SIZE).attr("font-weight", "bold").attr("opacity", 0.7).attr("class", "fc-group-label").text(group.label);
+  }
+  for (const edge of layout.edges) {
+    if (edge.points.length < 2) continue;
+    const edgeG = contentG.append("g").attr("class", "fc-edge-group").attr("data-line-number", String(edge.lineNumber));
+    const edgeColor = edge.color ?? palette.textMuted;
+    const markerId = edge.color ? `fc-arrow-${edge.color.replace("#", "")}` : "fc-arrow";
+    const pathD = lineGenerator(edge.points);
+    if (pathD) {
+      edgeG.append("path").attr("d", pathD).attr("fill", "none").attr("stroke", edgeColor).attr("stroke-width", EDGE_STROKE_WIDTH).attr("marker-end", `url(#${markerId})`).attr("class", "fc-edge");
+    }
+    if (edge.label) {
+      const midIdx = Math.floor(edge.points.length / 2);
+      const midPt = edge.points[midIdx];
+      const labelLen = edge.label.length;
+      const bgW = labelLen * 7 + 8;
+      const bgH = 16;
+      edgeG.append("rect").attr("x", midPt.x - bgW / 2).attr("y", midPt.y - bgH / 2 - 1).attr("width", bgW).attr("height", bgH).attr("rx", 3).attr("fill", palette.bg).attr("opacity", 0.85).attr("class", "fc-edge-label-bg");
+      edgeG.append("text").attr("x", midPt.x).attr("y", midPt.y + 4).attr("text-anchor", "middle").attr("fill", edgeColor).attr("font-size", EDGE_LABEL_FONT_SIZE).attr("class", "fc-edge-label").text(edge.label);
+    }
+  }
+  for (const node of layout.nodes) {
+    const nodeG = contentG.append("g").attr("transform", `translate(${node.x}, ${node.y})`).attr("class", "fc-node").attr("data-line-number", String(node.lineNumber));
+    if (onClickItem) {
+      nodeG.style("cursor", "pointer").on("click", () => {
+        onClickItem(node.lineNumber);
+      });
+    }
+    renderNodeShape(nodeG, node, palette, isDark);
+    nodeG.append("text").attr("x", 0).attr("y", 0).attr("text-anchor", "middle").attr("dominant-baseline", "central").attr("fill", palette.text).attr("font-size", NODE_FONT_SIZE).text(node.label);
+  }
+}
+function renderFlowchartForExport(content, theme, palette) {
+  const parsed = parseFlowchart(content, palette);
+  if (parsed.error || parsed.nodes.length === 0) return "";
+  const layout = layoutGraph(parsed);
+  const isDark = theme === "dark";
+  const container = document.createElement("div");
+  container.style.width = `${layout.width + DIAGRAM_PADDING * 2}px`;
+  container.style.height = `${layout.height + DIAGRAM_PADDING * 2 + (parsed.title ? TITLE_HEIGHT : 0)}px`;
+  container.style.position = "absolute";
+  container.style.left = "-9999px";
+  document.body.appendChild(container);
+  const exportWidth = layout.width + DIAGRAM_PADDING * 2;
+  const exportHeight = layout.height + DIAGRAM_PADDING * 2 + (parsed.title ? TITLE_HEIGHT : 0);
+  try {
+    renderFlowchart(
+      container,
+      parsed,
+      layout,
+      palette,
+      isDark,
+      void 0,
+      { width: exportWidth, height: exportHeight }
+    );
+    const svgEl = container.querySelector("svg");
+    if (!svgEl) return "";
+    if (theme === "transparent") {
+      svgEl.style.background = "none";
+    }
+    svgEl.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+    svgEl.style.fontFamily = FONT_FAMILY;
+    return svgEl.outerHTML;
+  } finally {
+    document.body.removeChild(container);
+  }
+}
+var DIAGRAM_PADDING, TITLE_HEIGHT, TITLE_FONT_SIZE, NODE_FONT_SIZE, EDGE_LABEL_FONT_SIZE, GROUP_LABEL_FONT_SIZE, EDGE_STROKE_WIDTH, NODE_STROKE_WIDTH, ARROWHEAD_W, ARROWHEAD_H, IO_SKEW, SUBROUTINE_INSET, DOC_WAVE_HEIGHT, GROUP_EXTRA_PADDING, lineGenerator;
+var init_flowchart_renderer = __esm({
+  "src/graph/flowchart-renderer.ts"() {
+    "use strict";
+    init_fonts();
+    init_flowchart_parser();
+    init_layout();
+    DIAGRAM_PADDING = 20;
+    TITLE_HEIGHT = 30;
+    TITLE_FONT_SIZE = 18;
+    NODE_FONT_SIZE = 13;
+    EDGE_LABEL_FONT_SIZE = 11;
+    GROUP_LABEL_FONT_SIZE = 11;
+    EDGE_STROKE_WIDTH = 1.5;
+    NODE_STROKE_WIDTH = 1.5;
+    ARROWHEAD_W = 10;
+    ARROWHEAD_H = 7;
+    IO_SKEW = 15;
+    SUBROUTINE_INSET = 8;
+    DOC_WAVE_HEIGHT = 10;
+    GROUP_EXTRA_PADDING = 12;
+    lineGenerator = d3Shape.line().x((d) => d.x).y((d) => d.y).curve(d3Shape.curveBasis);
+  }
+});
+
 // src/sequence/renderer.ts
 var renderer_exports = {};
 __export(renderer_exports, {
@@ -1622,8 +2532,45 @@ __export(renderer_exports, {
   groupMessagesBySection: () => groupMessagesBySection,
   renderSequenceDiagram: () => renderSequenceDiagram
 });
-import * as d3Selection from "d3-selection";
-function mix(a, b, pct) {
+import * as d3Selection2 from "d3-selection";
+function parseInlineMarkdown(text) {
+  const spans = [];
+  const regex = /\*\*(.+?)\*\*|__(.+?)__|\*(.+?)\*|_(.+?)_|`(.+?)`|\[(.+?)\]\((.+?)\)|([^*_`[]+)/g;
+  let match;
+  while ((match = regex.exec(text)) !== null) {
+    if (match[1]) spans.push({ text: match[1], bold: true });
+    else if (match[2]) spans.push({ text: match[2], bold: true });
+    else if (match[3]) spans.push({ text: match[3], italic: true });
+    else if (match[4]) spans.push({ text: match[4], italic: true });
+    else if (match[5]) spans.push({ text: match[5], code: true });
+    else if (match[6]) spans.push({ text: match[6], href: match[7] });
+    else if (match[8]) spans.push({ text: match[8] });
+  }
+  return spans;
+}
+function wrapTextLines(text, maxChars) {
+  const rawLines = text.split("\n");
+  const wrapped = [];
+  for (const line3 of rawLines) {
+    if (line3.length <= maxChars) {
+      wrapped.push(line3);
+    } else {
+      const words = line3.split(" ");
+      let current = "";
+      for (const word of words) {
+        if (current && (current + " " + word).length > maxChars) {
+          wrapped.push(current);
+          current = word;
+        } else {
+          current = current ? current + " " + word : word;
+        }
+      }
+      if (current) wrapped.push(current);
+    }
+  }
+  return wrapped;
+}
+function mix2(a, b, pct) {
   const parse = (h) => {
     const r = h.replace("#", "");
     const f = r.length === 3 ? r[0] + r[0] + r[1] + r[1] + r[2] + r[2] : r;
@@ -1729,7 +2676,12 @@ function groupMessagesBySection(elements, messages) {
           ...collectIndices(el.children),
           ...collectIndices(el.elseChildren)
         );
-      } else if (isSequenceSection(el)) {
+        if (el.elseIfBranches) {
+          for (const branch of el.elseIfBranches) {
+            indices.push(...collectIndices(branch.children));
+          }
+        }
+      } else if (isSequenceSection(el) || isSequenceNote(el)) {
         continue;
       } else {
         const idx = messages.indexOf(el);
@@ -1745,7 +2697,7 @@ function groupMessagesBySection(elements, messages) {
     } else if (currentGroup) {
       if (isSequenceBlock(el)) {
         currentGroup.messageIndices.push(...collectIndices([el]));
-      } else {
+      } else if (!isSequenceNote(el)) {
         const idx = messages.indexOf(el);
         if (idx >= 0) currentGroup.messageIndices.push(idx);
       }
@@ -1902,7 +2854,7 @@ function applyGroupOrdering(participants, groups) {
   return result;
 }
 function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateToLine, options) {
-  d3Selection.select(container).selectAll("*").remove();
+  d3Selection2.select(container).selectAll("*").remove();
   const { title, messages, elements, groups, options: parsedOptions } = parsed;
   const collapsedSections = options?.collapsedSections;
   const participants = applyPositionOverrides(
@@ -1943,7 +2895,15 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
       if (isSequenceBlock(el)) {
         const idx = findFirstMsgIndex(el.children);
         if (idx >= 0) return idx;
-      } else if (!isSequenceSection(el)) {
+        if (el.elseIfBranches) {
+          for (const branch of el.elseIfBranches) {
+            const branchIdx = findFirstMsgIndex(branch.children);
+            if (branchIdx >= 0) return branchIdx;
+          }
+        }
+        const elseIdx = findFirstMsgIndex(el.elseChildren);
+        if (elseIdx >= 0) return elseIdx;
+      } else if (!isSequenceSection(el) && !isSequenceNote(el)) {
         const idx = messages.indexOf(el);
         if (idx >= 0 && !hiddenMsgIndices.has(idx)) return idx;
       }
@@ -1963,6 +2923,13 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
       if (!isSequenceBlock(el)) continue;
       const firstIdx = findFirstMsgIndex(el.children);
       if (firstIdx >= 0) addExtra(firstIdx, BLOCK_HEADER_SPACE);
+      if (el.elseIfBranches) {
+        for (const branch of el.elseIfBranches) {
+          const firstBranchIdx = findFirstMsgIndex(branch.children);
+          if (firstBranchIdx >= 0) addExtra(firstBranchIdx, BLOCK_HEADER_SPACE);
+          markBlockSpacing(branch.children);
+        }
+      }
       const firstElseIdx = findFirstMsgIndex(el.elseChildren);
       if (firstElseIdx >= 0) addExtra(firstElseIdx, BLOCK_HEADER_SPACE);
       markBlockSpacing(el.children);
@@ -1976,6 +2943,34 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
   if (elements && elements.length > 0) {
     markBlockSpacing(elements);
   }
+  const NOTE_OFFSET_BELOW = 16;
+  const computeNoteHeight = (text) => {
+    const lines = wrapTextLines(text, NOTE_CHARS_PER_LINE);
+    return lines.length * NOTE_LINE_H + NOTE_PAD_V * 2;
+  };
+  const markNoteSpacing = (els) => {
+    for (let i = 0; i < els.length; i++) {
+      const el = els[i];
+      if (isSequenceNote(el)) {
+        const noteH = computeNoteHeight(el.text);
+        const nextIdx = i + 1 < els.length ? findFirstMsgIndex([els[i + 1]]) : -1;
+        if (nextIdx >= 0) {
+          addExtra(nextIdx, noteH + NOTE_OFFSET_BELOW);
+        }
+      } else if (isSequenceBlock(el)) {
+        markNoteSpacing(el.children);
+        if (el.elseIfBranches) {
+          for (const branch of el.elseIfBranches) {
+            markNoteSpacing(branch.children);
+          }
+        }
+        markNoteSpacing(el.elseChildren);
+      }
+    }
+  };
+  if (elements && elements.length > 0) {
+    markNoteSpacing(elements);
+  }
   const preSectionMsgIndices = [];
   const sectionRegions = [];
   {
@@ -1984,15 +2979,27 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
       for (const child of block.children) {
         if (isSequenceBlock(child)) {
           indices.push(...collectMsgIndicesFromBlock(child));
-        } else if (!isSequenceSection(child)) {
+        } else if (!isSequenceSection(child) && !isSequenceNote(child)) {
           const idx = messages.indexOf(child);
           if (idx >= 0) indices.push(idx);
         }
       }
+      if (block.elseIfBranches) {
+        for (const branch of block.elseIfBranches) {
+          for (const child of branch.children) {
+            if (isSequenceBlock(child)) {
+              indices.push(...collectMsgIndicesFromBlock(child));
+            } else if (!isSequenceSection(child) && !isSequenceNote(child)) {
+              const idx = messages.indexOf(child);
+              if (idx >= 0) indices.push(idx);
+            }
+          }
+        }
+      }
       for (const child of block.elseChildren) {
         if (isSequenceBlock(child)) {
           indices.push(...collectMsgIndicesFromBlock(child));
-        } else if (!isSequenceSection(child)) {
+        } else if (!isSequenceSection(child) && !isSequenceNote(child)) {
           const idx = messages.indexOf(child);
           if (idx >= 0) indices.push(idx);
         }
@@ -2067,7 +3074,7 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
   const GROUP_PADDING_TOP = 22;
   const GROUP_PADDING_BOTTOM = 8;
   const GROUP_LABEL_SIZE = 11;
-  const titleOffset = title ? TITLE_HEIGHT : 0;
+  const titleOffset = title ? TITLE_HEIGHT2 : 0;
   const groupOffset = groups.length > 0 ? GROUP_PADDING_TOP + GROUP_LABEL_SIZE : 0;
   const participantStartY = TOP_MARGIN + titleOffset + PARTICIPANT_Y_OFFSET + groupOffset;
   const lifelineStartY0 = participantStartY + PARTICIPANT_BOX_HEIGHT;
@@ -2121,7 +3128,7 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
   participants.forEach((p, i) => {
     participantX.set(p.id, offsetX + i * PARTICIPANT_GAP);
   });
-  const svg = d3Selection.select(container).append("svg").attr("width", "100%").attr("height", totalHeight).attr("viewBox", `0 0 ${svgWidth} ${totalHeight}`).attr("preserveAspectRatio", "xMidYMin meet").attr("class", "sequence-diagram").style("font-family", FONT_FAMILY);
+  const svg = d3Selection2.select(container).append("svg").attr("width", "100%").attr("height", totalHeight).attr("viewBox", `0 0 ${svgWidth} ${totalHeight}`).attr("preserveAspectRatio", "xMidYMin meet").attr("class", "sequence-diagram").style("font-family", FONT_FAMILY);
   const defs = svg.append("defs");
   defs.append("marker").attr("id", "seq-arrowhead").attr("viewBox", `0 0 ${ARROWHEAD_SIZE} ${ARROWHEAD_SIZE}`).attr("refX", ARROWHEAD_SIZE).attr("refY", ARROWHEAD_SIZE / 2).attr("markerWidth", ARROWHEAD_SIZE).attr("markerHeight", ARROWHEAD_SIZE).attr("orient", "auto").append("polygon").attr(
     "points",
@@ -2147,7 +3154,7 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
     const boxY = participantStartY - GROUP_PADDING_TOP;
     const boxH = PARTICIPANT_BOX_HEIGHT + GROUP_PADDING_TOP + GROUP_PADDING_BOTTOM;
     const resolvedGroupColor = group.color ? resolveColor(group.color, palette) : void 0;
-    const fillColor = resolvedGroupColor ? mix(resolvedGroupColor, isDark ? palette.surface : palette.bg, 10) : isDark ? palette.surface : palette.bg;
+    const fillColor = resolvedGroupColor ? mix2(resolvedGroupColor, isDark ? palette.surface : palette.bg, 10) : isDark ? palette.surface : palette.bg;
     const strokeColor = resolvedGroupColor || palette.textMuted;
     svg.append("rect").attr("x", minX).attr("y", boxY).attr("width", maxX - minX).attr("height", boxH).attr("rx", 6).attr("fill", fillColor).attr("stroke", strokeColor).attr("stroke-width", 1).attr("stroke-opacity", 0.5).attr("class", "group-box").attr("data-group-line", String(group.lineNumber));
     svg.append("text").attr("x", minX + 8).attr("y", boxY + GROUP_LABEL_SIZE + 4).attr("fill", strokeColor).attr("font-size", GROUP_LABEL_SIZE).attr("font-weight", "bold").attr("opacity", 0.7).attr("class", "group-label").attr("data-group-line", String(group.lineNumber)).text(group.name);
@@ -2172,7 +3179,12 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
           ...collectMsgIndices(el.children),
           ...collectMsgIndices(el.elseChildren)
         );
-      } else if (!isSequenceSection(el)) {
+        if (el.elseIfBranches) {
+          for (const branch of el.elseIfBranches) {
+            indices.push(...collectMsgIndices(branch.children));
+          }
+        }
+      } else if (!isSequenceSection(el) && !isSequenceNote(el)) {
         const idx = messages.indexOf(el);
         if (idx >= 0) indices.push(idx);
       }
@@ -2185,8 +3197,21 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
     for (const el of els) {
       if (!isSequenceBlock(el)) continue;
       const ifIndices = collectMsgIndices(el.children);
+      const elseIfBranchData = [];
+      if (el.elseIfBranches) {
+        for (const branch of el.elseIfBranches) {
+          elseIfBranchData.push({
+            label: branch.label,
+            indices: collectMsgIndices(branch.children)
+          });
+        }
+      }
       const elseIndices = collectMsgIndices(el.elseChildren);
-      const allIndices = [...ifIndices, ...elseIndices];
+      const allIndices = [
+        ...ifIndices,
+        ...elseIfBranchData.flatMap((b) => b.indices),
+        ...elseIndices
+      ];
       if (allIndices.length === 0) continue;
       let minStep = Infinity;
       let maxStep = -Infinity;
@@ -2224,6 +3249,32 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
         italic: false,
         blockLine: el.lineNumber
       });
+      for (const branchData of elseIfBranchData) {
+        if (branchData.indices.length > 0) {
+          let firstBranchStep = Infinity;
+          for (const mi of branchData.indices) {
+            const first = msgToFirstStep.get(mi);
+            if (first !== void 0)
+              firstBranchStep = Math.min(firstBranchStep, first);
+          }
+          if (firstBranchStep < Infinity) {
+            const dividerY = stepY(firstBranchStep) - stepSpacing / 2;
+            deferredLines.push({
+              x1: frameX,
+              y1: dividerY,
+              x2: frameX + frameW,
+              y2: dividerY
+            });
+            deferredLabels.push({
+              x: frameX + 6,
+              y: dividerY + 14,
+              text: `else if ${branchData.label}`,
+              bold: false,
+              italic: true
+            });
+          }
+        }
+      }
       if (elseIndices.length > 0) {
         let firstElseStep = Infinity;
         for (const mi of elseIndices) {
@@ -2249,6 +3300,11 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
         }
       }
       renderBlockFrames(el.children, depth + 1);
+      if (el.elseIfBranches) {
+        for (const branch of el.elseIfBranches) {
+          renderBlockFrames(branch.children, depth + 1);
+        }
+      }
       renderBlockFrames(el.elseChildren, depth + 1);
     }
   };
@@ -2270,7 +3326,7 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
       if (msg) coveredLines.push(msg.lineNumber);
     }
     svg.append("rect").attr("x", x).attr("y", y1).attr("width", ACTIVATION_WIDTH).attr("height", y2 - y1).attr("fill", isDark ? palette.surface : palette.bg);
-    const actFill = mix(palette.primary, isDark ? palette.surface : palette.bg, isDark ? 15 : 30);
+    const actFill = mix2(palette.primary, isDark ? palette.surface : palette.bg, isDark ? 15 : 30);
     svg.append("rect").attr("x", x).attr("y", y1).attr("width", ACTIVATION_WIDTH).attr("height", y2 - y1).attr("fill", actFill).attr("stroke", palette.primary).attr("stroke-width", 1).attr("stroke-opacity", 0.5).attr("data-participant-id", act.participantId).attr("data-msg-lines", coveredLines.join(",")).attr("class", "activation");
   });
   for (const ln of deferredLines) {
@@ -2396,6 +3452,94 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
       }
     }
   });
+  const noteFill = isDark ? mix2(palette.surface, palette.bg, 50) : mix2(palette.bg, palette.surface, 15);
+  const findAssociatedStep = (note) => {
+    let bestMsgIndex = -1;
+    let bestLine = -1;
+    for (let mi = 0; mi < messages.length; mi++) {
+      if (messages[mi].lineNumber < note.lineNumber && messages[mi].lineNumber > bestLine && !hiddenMsgIndices.has(mi)) {
+        bestLine = messages[mi].lineNumber;
+        bestMsgIndex = mi;
+      }
+    }
+    if (bestMsgIndex < 0) return -1;
+    return msgToFirstStep.get(bestMsgIndex) ?? -1;
+  };
+  const renderNoteElements = (els) => {
+    for (const el of els) {
+      if (isSequenceNote(el)) {
+        const px = participantX.get(el.participantId);
+        if (px === void 0) continue;
+        const si = findAssociatedStep(el);
+        if (si < 0) continue;
+        const noteY = stepY(si);
+        const wrappedLines = wrapTextLines(el.text, NOTE_CHARS_PER_LINE);
+        const noteH = wrappedLines.length * NOTE_LINE_H + NOTE_PAD_V * 2;
+        const maxLineLen = Math.max(...wrappedLines.map((l) => l.length));
+        const noteW = Math.min(
+          NOTE_MAX_W,
+          Math.max(80, maxLineLen * NOTE_CHAR_W + NOTE_PAD_H * 2 + NOTE_FOLD)
+        );
+        const isRight = el.position === "right";
+        const noteX = isRight ? px + ACTIVATION_WIDTH + NOTE_GAP : px - ACTIVATION_WIDTH - NOTE_GAP - noteW;
+        const noteTopY = noteY + NOTE_OFFSET_BELOW;
+        const noteG = svg.append("g").attr("class", "note").attr("data-note-toggle", "").attr("data-line-number", String(el.lineNumber)).attr("data-line-end", String(el.endLineNumber));
+        noteG.append("path").attr(
+          "d",
+          [
+            `M ${noteX} ${noteTopY}`,
+            `L ${noteX + noteW - NOTE_FOLD} ${noteTopY}`,
+            `L ${noteX + noteW} ${noteTopY + NOTE_FOLD}`,
+            `L ${noteX + noteW} ${noteTopY + noteH}`,
+            `L ${noteX} ${noteTopY + noteH}`,
+            "Z"
+          ].join(" ")
+        ).attr("fill", noteFill).attr("stroke", palette.textMuted).attr("stroke-width", 0.75).attr("class", "note-box");
+        noteG.append("path").attr(
+          "d",
+          [
+            `M ${noteX + noteW - NOTE_FOLD} ${noteTopY}`,
+            `L ${noteX + noteW - NOTE_FOLD} ${noteTopY + NOTE_FOLD}`,
+            `L ${noteX + noteW} ${noteTopY + NOTE_FOLD}`
+          ].join(" ")
+        ).attr("fill", "none").attr("stroke", palette.textMuted).attr("stroke-width", 0.75).attr("class", "note-fold");
+        wrappedLines.forEach((line3, li) => {
+          const textY = noteTopY + NOTE_PAD_V + (li + 1) * NOTE_LINE_H - 3;
+          const isBullet = line3.startsWith("- ");
+          const bulletIndent = isBullet ? 10 : 0;
+          const displayLine = isBullet ? line3.slice(2) : line3;
+          const textEl = noteG.append("text").attr("x", noteX + NOTE_PAD_H + bulletIndent).attr("y", textY).attr("fill", palette.text).attr("font-size", NOTE_FONT_SIZE).attr("class", "note-text");
+          if (isBullet) {
+            noteG.append("text").attr("x", noteX + NOTE_PAD_H).attr("y", textY).attr("fill", palette.text).attr("font-size", NOTE_FONT_SIZE).text("\u2022");
+          }
+          const spans = parseInlineMarkdown(displayLine);
+          for (const span of spans) {
+            if (span.href) {
+              const a = textEl.append("a").attr("href", span.href);
+              a.append("tspan").text(span.text).attr("fill", palette.primary).style("text-decoration", "underline");
+            } else {
+              const tspan = textEl.append("tspan").text(span.text);
+              if (span.bold) tspan.attr("font-weight", "bold");
+              if (span.italic) tspan.attr("font-style", "italic");
+              if (span.code)
+                tspan.attr("font-family", "monospace").attr("font-size", NOTE_FONT_SIZE - 1);
+            }
+          }
+        });
+      } else if (isSequenceBlock(el)) {
+        renderNoteElements(el.children);
+        if (el.elseIfBranches) {
+          for (const branch of el.elseIfBranches) {
+            renderNoteElements(branch.children);
+          }
+        }
+        renderNoteElements(el.elseChildren);
+      }
+    }
+  };
+  if (elements && elements.length > 0) {
+    renderNoteElements(elements);
+  }
 }
 function renderParticipant(svg, participant, cx, cy, palette, isDark) {
   const g = svg.append("g").attr("transform", `translate(${cx}, ${cy})`).attr("class", "participant").attr("data-participant-id", participant.id);
@@ -2437,7 +3581,7 @@ function renderParticipant(svg, participant, cx, cy, palette, isDark) {
     isActor ? PARTICIPANT_BOX_HEIGHT + 14 : PARTICIPANT_BOX_HEIGHT / 2 + 5
   ).attr("text-anchor", "middle").attr("fill", palette.text).attr("font-size", 13).attr("font-weight", 500).text(participant.label);
 }
-var PARTICIPANT_GAP, PARTICIPANT_BOX_WIDTH, PARTICIPANT_BOX_HEIGHT, TOP_MARGIN, TITLE_HEIGHT, PARTICIPANT_Y_OFFSET, SERVICE_BORDER_RADIUS, MESSAGE_START_OFFSET, LIFELINE_TAIL, ARROWHEAD_SIZE, fill, stroke, SW, W, H;
+var PARTICIPANT_GAP, PARTICIPANT_BOX_WIDTH, PARTICIPANT_BOX_HEIGHT, TOP_MARGIN, TITLE_HEIGHT2, PARTICIPANT_Y_OFFSET, SERVICE_BORDER_RADIUS, MESSAGE_START_OFFSET, LIFELINE_TAIL, ARROWHEAD_SIZE, NOTE_MAX_W, NOTE_FOLD, NOTE_PAD_H, NOTE_PAD_V, NOTE_FONT_SIZE, NOTE_LINE_H, NOTE_GAP, NOTE_CHAR_W, NOTE_CHARS_PER_LINE, fill, stroke, SW, W, H;
 var init_renderer = __esm({
   "src/sequence/renderer.ts"() {
     "use strict";
@@ -2448,13 +3592,22 @@ var init_renderer = __esm({
     PARTICIPANT_BOX_WIDTH = 120;
     PARTICIPANT_BOX_HEIGHT = 50;
     TOP_MARGIN = 20;
-    TITLE_HEIGHT = 30;
+    TITLE_HEIGHT2 = 30;
     PARTICIPANT_Y_OFFSET = 10;
     SERVICE_BORDER_RADIUS = 10;
     MESSAGE_START_OFFSET = 30;
     LIFELINE_TAIL = 30;
     ARROWHEAD_SIZE = 8;
-    fill = (palette, isDark) => mix(palette.primary, isDark ? palette.surface : palette.bg, isDark ? 15 : 30);
+    NOTE_MAX_W = 200;
+    NOTE_FOLD = 10;
+    NOTE_PAD_H = 8;
+    NOTE_PAD_V = 6;
+    NOTE_FONT_SIZE = 10;
+    NOTE_LINE_H = 14;
+    NOTE_GAP = 15;
+    NOTE_CHAR_W = 6;
+    NOTE_CHARS_PER_LINE = Math.floor((NOTE_MAX_W - NOTE_PAD_H * 2 - NOTE_FOLD) / NOTE_CHAR_W);
+    fill = (palette, isDark) => mix2(palette.primary, isDark ? palette.surface : palette.bg, isDark ? 15 : 30);
     stroke = (palette) => palette.textMuted;
     SW = 1.5;
     W = PARTICIPANT_BOX_WIDTH;
@@ -2462,50 +3615,8 @@ var init_renderer = __esm({
   }
 });
 
-// src/dgmo-router.ts
-init_parser();
-var DGMO_CHART_TYPE_MAP = {
-  // Standard charts (via ECharts)
-  bar: "echart",
-  line: "echart",
-  "multi-line": "echart",
-  area: "echart",
-  pie: "echart",
-  doughnut: "echart",
-  radar: "echart",
-  "polar-area": "echart",
-  "bar-stacked": "echart",
-  // ECharts
-  scatter: "echart",
-  sankey: "echart",
-  chord: "echart",
-  function: "echart",
-  heatmap: "echart",
-  funnel: "echart",
-  // D3
-  slope: "d3",
-  wordcloud: "d3",
-  arc: "d3",
-  timeline: "d3",
-  venn: "d3",
-  quadrant: "d3",
-  sequence: "d3"
-};
-function getDgmoFramework(chartType) {
-  return DGMO_CHART_TYPE_MAP[chartType.toLowerCase()] ?? null;
-}
-function parseDgmoChartType(content) {
-  const lines = content.split("\n");
-  for (const line2 of lines) {
-    const trimmed = line2.trim();
-    if (!trimmed || trimmed.startsWith("#") || trimmed.startsWith("//"))
-      continue;
-    const match = trimmed.match(/^chart\s*:\s*(.+)/i);
-    if (match) return match[1].trim().toLowerCase();
-  }
-  if (looksLikeSequence(content)) return "sequence";
-  return null;
-}
+// src/index.ts
+init_dgmo_router();
 
 // src/chart.ts
 init_colors();
@@ -2867,7 +3978,7 @@ function parseEChart(content, palette) {
 function buildEChartsOption(parsed, palette, isDark) {
   const textColor = palette.text;
   const axisLineColor = palette.border;
-  const gridOpacity = isDark ? 0.7 : 0.4;
+  const gridOpacity = isDark ? 0.7 : 0.55;
   const colors = getSeriesColors(palette);
   if (parsed.error) {
     return {};
@@ -3573,7 +4684,7 @@ function buildEChartsOptionFromChart(parsed, palette, isDark) {
   const textColor = palette.text;
   const axisLineColor = palette.border;
   const splitLineColor = palette.border;
-  const gridOpacity = isDark ? 0.7 : 0.4;
+  const gridOpacity = isDark ? 0.7 : 0.55;
   const colors = getSeriesColors(palette);
   const titleConfig = parsed.title ? {
     text: parsed.title,
@@ -3989,8 +5100,8 @@ init_fonts();
 init_colors();
 init_palettes();
 import * as d3Scale from "d3-scale";
-import * as d3Selection2 from "d3-selection";
-import * as d3Shape from "d3-shape";
+import * as d3Selection3 from "d3-selection";
+import * as d3Shape2 from "d3-shape";
 import * as d3Array from "d3-array";
 import cloud from "d3-cloud";
 var DEFAULT_CLOUD_OPTIONS = {
@@ -4094,10 +5205,10 @@ function parseD3(content, palette) {
   let currentArcGroup = null;
   let currentTimelineGroup = null;
   for (let i = 0; i < lines.length; i++) {
-    const line2 = lines[i].trim();
+    const line3 = lines[i].trim();
     const lineNumber = i + 1;
-    if (!line2) continue;
-    const sectionMatch = line2.match(/^#{2,}\s+(.+?)(?:\s*\(([^)]+)\))?\s*$/);
+    if (!line3) continue;
+    const sectionMatch = line3.match(/^#{2,}\s+(.+?)(?:\s*\(([^)]+)\))?\s*$/);
     if (sectionMatch) {
       if (result.type === "arc") {
         const name = sectionMatch[1].trim();
@@ -4112,11 +5223,11 @@ function parseD3(content, palette) {
       }
       continue;
     }
-    if (line2.startsWith("#") || line2.startsWith("//")) {
+    if (line3.startsWith("#") || line3.startsWith("//")) {
       continue;
     }
     if (result.type === "arc") {
-      const linkMatch = line2.match(
+      const linkMatch = line3.match(
         /^(.+?)\s*->\s*(.+?)(?:\(([^)]+)\))?\s*(?::\s*(\d+(?:\.\d+)?))?$/
       );
       if (linkMatch) {
@@ -4146,7 +5257,7 @@ function parseD3(content, palette) {
       }
     }
     if (result.type === "timeline") {
-      const eraMatch = line2.match(
+      const eraMatch = line3.match(
         /^era\s+(\d{4}(?:-\d{2})?(?:-\d{2})?)\s*->\s*(\d{4}(?:-\d{2})?(?:-\d{2})?)\s*:\s*(.+?)(?:\s*\(([^)]+)\))?\s*$/
       );
       if (eraMatch) {
@@ -4159,7 +5270,7 @@ function parseD3(content, palette) {
         });
         continue;
       }
-      const markerMatch = line2.match(
+      const markerMatch = line3.match(
         /^marker\s+(\d{4}(?:-\d{2})?(?:-\d{2})?)\s*:\s*(.+?)(?:\s*\(([^)]+)\))?\s*$/
       );
       if (markerMatch) {
@@ -4174,7 +5285,7 @@ function parseD3(content, palette) {
       }
     }
     if (result.type === "timeline") {
-      const durationMatch = line2.match(
+      const durationMatch = line3.match(
         /^(\d{4}(?:-\d{2})?(?:-\d{2})?)\s*->\s*(\?)?(\d+(?:\.\d{1,2})?)([dwmy])\s*:\s*(.+)$/
       );
       if (durationMatch) {
@@ -4193,7 +5304,7 @@ function parseD3(content, palette) {
         });
         continue;
       }
-      const rangeMatch = line2.match(
+      const rangeMatch = line3.match(
         /^(\d{4}(?:-\d{2})?(?:-\d{2})?)\s*->\s*(\?)?(\d{4}(?:-\d{2})?(?:-\d{2})?)\s*:\s*(.+)$/
       );
       if (rangeMatch) {
@@ -4207,7 +5318,7 @@ function parseD3(content, palette) {
         });
         continue;
       }
-      const pointMatch = line2.match(
+      const pointMatch = line3.match(
         /^(\d{4}(?:-\d{2})?(?:-\d{2})?)\s*:\s*(.+)$/
       );
       if (pointMatch) {
@@ -4222,7 +5333,7 @@ function parseD3(content, palette) {
       }
     }
     if (result.type === "venn") {
-      const overlapMatch = line2.match(
+      const overlapMatch = line3.match(
         /^(.+?&.+?)\s*:\s*(\d+(?:\.\d+)?)\s*(?:"([^"]*)")?\s*$/
       );
       if (overlapMatch) {
@@ -4232,7 +5343,7 @@ function parseD3(content, palette) {
         result.vennOverlaps.push({ sets, size, label, lineNumber });
         continue;
       }
-      const setMatch = line2.match(
+      const setMatch = line3.match(
         /^(.+?)(?:\(([^)]+)\))?\s*:\s*(\d+(?:\.\d+)?)\s*(?:"([^"]*)")?\s*$/
       );
       if (setMatch) {
@@ -4245,7 +5356,7 @@ function parseD3(content, palette) {
       }
     }
     if (result.type === "quadrant") {
-      const xAxisMatch = line2.match(/^x-axis\s*:\s*(.+)/i);
+      const xAxisMatch = line3.match(/^x-axis\s*:\s*(.+)/i);
       if (xAxisMatch) {
         const parts = xAxisMatch[1].split(",").map((s) => s.trim());
         if (parts.length >= 2) {
@@ -4254,7 +5365,7 @@ function parseD3(content, palette) {
         }
         continue;
       }
-      const yAxisMatch = line2.match(/^y-axis\s*:\s*(.+)/i);
+      const yAxisMatch = line3.match(/^y-axis\s*:\s*(.+)/i);
       if (yAxisMatch) {
         const parts = yAxisMatch[1].split(",").map((s) => s.trim());
         if (parts.length >= 2) {
@@ -4264,7 +5375,7 @@ function parseD3(content, palette) {
         continue;
       }
       const quadrantLabelRe = /^(top-right|top-left|bottom-left|bottom-right)\s*:\s*(.+)/i;
-      const quadrantMatch = line2.match(quadrantLabelRe);
+      const quadrantMatch = line3.match(quadrantLabelRe);
       if (quadrantMatch) {
         const position = quadrantMatch[1].toLowerCase();
         const labelPart = quadrantMatch[2].trim();
@@ -4280,7 +5391,7 @@ function parseD3(content, palette) {
           result.quadrantLabels.bottomRight = label;
         continue;
       }
-      const pointMatch = line2.match(
+      const pointMatch = line3.match(
         /^(.+?):\s*([0-9]*\.?[0-9]+)\s*,\s*([0-9]*\.?[0-9]+)\s*$/
       );
       if (pointMatch) {
@@ -4297,13 +5408,13 @@ function parseD3(content, palette) {
         continue;
       }
     }
-    const colonIndex = line2.indexOf(":");
+    const colonIndex = line3.indexOf(":");
     if (colonIndex !== -1) {
-      const rawKey = line2.substring(0, colonIndex).trim();
+      const rawKey = line3.substring(0, colonIndex).trim();
       const key = rawKey.toLowerCase();
       const colorMatch = rawKey.match(/^(.+?)\(([^)]+)\)\s*$/);
       if (key === "chart") {
-        const value = line2.substring(colonIndex + 1).trim().toLowerCase();
+        const value = line3.substring(colonIndex + 1).trim().toLowerCase();
         if (value === "slope" || value === "wordcloud" || value === "arc" || value === "timeline" || value === "venn" || value === "quadrant" || value === "sequence") {
           result.type = value;
         } else {
@@ -4313,35 +5424,35 @@ function parseD3(content, palette) {
         continue;
       }
       if (key === "title") {
-        result.title = line2.substring(colonIndex + 1).trim();
+        result.title = line3.substring(colonIndex + 1).trim();
         if (result.type === "quadrant") {
           result.quadrantTitleLineNumber = lineNumber;
         }
         continue;
       }
       if (key === "orientation") {
-        const v = line2.substring(colonIndex + 1).trim().toLowerCase();
+        const v = line3.substring(colonIndex + 1).trim().toLowerCase();
         if (v === "horizontal" || v === "vertical") {
           result.orientation = v;
         }
         continue;
       }
       if (key === "order") {
-        const v = line2.substring(colonIndex + 1).trim().toLowerCase();
+        const v = line3.substring(colonIndex + 1).trim().toLowerCase();
         if (v === "name" || v === "group" || v === "degree") {
           result.arcOrder = v;
         }
         continue;
       }
       if (key === "sort") {
-        const v = line2.substring(colonIndex + 1).trim().toLowerCase();
+        const v = line3.substring(colonIndex + 1).trim().toLowerCase();
         if (v === "time" || v === "group") {
           result.timelineSort = v;
         }
         continue;
       }
       if (key === "swimlanes") {
-        const v = line2.substring(colonIndex + 1).trim().toLowerCase();
+        const v = line3.substring(colonIndex + 1).trim().toLowerCase();
         if (v === "on") {
           result.timelineSwimlanes = true;
         } else if (v === "off") {
@@ -4350,7 +5461,7 @@ function parseD3(content, palette) {
         continue;
       }
       if (key === "values") {
-        const v = line2.substring(colonIndex + 1).trim().toLowerCase();
+        const v = line3.substring(colonIndex + 1).trim().toLowerCase();
         if (v === "off") {
           result.vennShowValues = false;
         } else if (v === "on") {
@@ -4359,21 +5470,21 @@ function parseD3(content, palette) {
         continue;
       }
       if (key === "rotate") {
-        const v = line2.substring(colonIndex + 1).trim().toLowerCase();
+        const v = line3.substring(colonIndex + 1).trim().toLowerCase();
         if (v === "none" || v === "mixed" || v === "angled") {
           result.cloudOptions.rotate = v;
         }
         continue;
       }
       if (key === "max") {
-        const v = parseInt(line2.substring(colonIndex + 1).trim(), 10);
+        const v = parseInt(line3.substring(colonIndex + 1).trim(), 10);
         if (!isNaN(v) && v > 0) {
           result.cloudOptions.max = v;
         }
         continue;
       }
       if (key === "size") {
-        const v = line2.substring(colonIndex + 1).trim();
+        const v = line3.substring(colonIndex + 1).trim();
         const parts = v.split(",").map((s) => parseInt(s.trim(), 10));
         if (parts.length === 2 && parts.every((n) => !isNaN(n) && n > 0) && parts[0] < parts[1]) {
           result.cloudOptions.minSize = parts[0];
@@ -4383,7 +5494,7 @@ function parseD3(content, palette) {
       }
       const labelPart = colorMatch ? colorMatch[1].trim() : rawKey;
       const colorPart = colorMatch ? resolveColor(colorMatch[2].trim(), palette) : null;
-      const valuePart = line2.substring(colonIndex + 1).trim();
+      const valuePart = line3.substring(colonIndex + 1).trim();
       const values = valuePart.split(",").map((v) => v.trim());
       const numericValues = [];
       let allNumeric = true;
@@ -4414,15 +5525,15 @@ function parseD3(content, palette) {
       }
     }
     if (result.type === "wordcloud") {
-      if (colonIndex === -1 && !line2.includes(" ")) {
-        result.words.push({ text: line2, weight: 10, lineNumber });
+      if (colonIndex === -1 && !line3.includes(" ")) {
+        result.words.push({ text: line3, weight: 10, lineNumber });
       } else {
-        freeformLines.push(line2);
+        freeformLines.push(line3);
       }
       continue;
     }
-    if (result.periods.length === 0 && line2.includes(",") && !line2.includes(":")) {
-      const periods = line2.split(",").map((p) => p.trim()).filter(Boolean);
+    if (result.periods.length === 0 && line3.includes(",") && !line3.includes(":")) {
+      const periods = line3.split(",").map((p) => p.trim()).filter(Boolean);
       if (periods.length >= 2) {
         result.periods = periods;
         continue;
@@ -4645,7 +5756,7 @@ var SLOPE_MARGIN = { top: 80, bottom: 40, left: 80 };
 var SLOPE_LABEL_FONT_SIZE = 14;
 var SLOPE_CHAR_WIDTH = 8;
 function renderSlopeChart(container, parsed, palette, isDark, onClickItem, exportDims) {
-  d3Selection2.select(container).selectAll(":not([data-d3-tooltip])").remove();
+  d3Selection3.select(container).selectAll(":not([data-d3-tooltip])").remove();
   const { periods, data, title } = parsed;
   if (data.length === 0 || periods.length < 2) return;
   const width = exportDims?.width ?? container.clientWidth;
@@ -4672,7 +5783,7 @@ function renderSlopeChart(container, parsed, palette, isDark, onClickItem, expor
   const valuePadding = (maxVal - minVal) * 0.1 || 1;
   const yScale = d3Scale.scaleLinear().domain([minVal - valuePadding, maxVal + valuePadding]).range([innerHeight, 0]);
   const xScale = d3Scale.scalePoint().domain(periods).range([0, innerWidth]).padding(0);
-  const svg = d3Selection2.select(container).append("svg").attr("width", width).attr("height", height).style("background", bgColor);
+  const svg = d3Selection3.select(container).append("svg").attr("width", width).attr("height", height).style("background", bgColor);
   const g = svg.append("g").attr("transform", `translate(${SLOPE_MARGIN.left},${SLOPE_MARGIN.top})`);
   const tooltip = createTooltip(container, palette, isDark);
   if (title) {
@@ -4683,7 +5794,7 @@ function renderSlopeChart(container, parsed, palette, isDark, onClickItem, expor
     g.append("text").attr("x", x).attr("y", -15).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", "18px").attr("font-weight", "600").text(period);
     g.append("line").attr("x1", x).attr("y1", 0).attr("x2", x).attr("y2", innerHeight).attr("stroke", mutedColor).attr("stroke-width", 1).attr("stroke-dasharray", "4,4");
   }
-  const lineGen = d3Shape.line().x((_d, i) => xScale(periods[i])).y((d) => yScale(d));
+  const lineGen = d3Shape2.line().x((_d, i) => xScale(periods[i])).y((d) => yScale(d));
   data.forEach((item, idx) => {
     const color = item.color ?? colors[idx % colors.length];
     const firstVal = item.values[0];
@@ -4746,11 +5857,11 @@ function renderSlopeChart(container, parsed, palette, isDark, onClickItem, expor
       const lineHeight = SLOPE_LABEL_FONT_SIZE * 1.2;
       const totalHeight = (lines.length - 1) * lineHeight;
       const startDy = -totalHeight / 2;
-      lines.forEach((line2, li) => {
+      lines.forEach((line3, li) => {
         labelEl.append("tspan").attr("x", lastX + 10).attr(
           "dy",
           li === 0 ? `${startDy + SLOPE_LABEL_FONT_SIZE * 0.35}px` : `${lineHeight}px`
-        ).text(line2);
+        ).text(line3);
       });
     }
   });
@@ -4845,7 +5956,7 @@ function orderArcNodes(links, order, groups) {
 }
 var ARC_MARGIN = { top: 60, right: 40, bottom: 60, left: 40 };
 function renderArcDiagram(container, parsed, palette, _isDark, onClickItem, exportDims) {
-  d3Selection2.select(container).selectAll(":not([data-d3-tooltip])").remove();
+  d3Selection3.select(container).selectAll(":not([data-d3-tooltip])").remove();
   const { links, title, orientation, arcOrder, arcNodeGroups } = parsed;
   if (links.length === 0) return;
   const width = exportDims?.width ?? container.clientWidth;
@@ -4882,7 +5993,7 @@ function renderArcDiagram(container, parsed, palette, _isDark, onClickItem, expo
   const values = links.map((l) => l.value);
   const [minVal, maxVal] = d3Array.extent(values);
   const strokeScale = d3Scale.scaleLinear().domain([minVal, maxVal]).range([1.5, 6]);
-  const svg = d3Selection2.select(container).append("svg").attr("width", width).attr("height", height).style("background", bgColor);
+  const svg = d3Selection3.select(container).append("svg").attr("width", width).attr("height", height).style("background", bgColor);
   const g = svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`);
   if (title) {
     svg.append("text").attr("x", width / 2).attr("y", 30).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", "20px").attr("font-weight", "700").text(title);
@@ -4897,14 +6008,14 @@ function renderArcDiagram(container, parsed, palette, _isDark, onClickItem, expo
   function handleMouseEnter(hovered) {
     const connected = neighbors.get(hovered);
     g.selectAll(".arc-link").each(function() {
-      const el = d3Selection2.select(this);
+      const el = d3Selection3.select(this);
       const src = el.attr("data-source");
       const tgt = el.attr("data-target");
       const isRelated = src === hovered || tgt === hovered;
       el.attr("stroke-opacity", isRelated ? 0.85 : FADE_OPACITY);
     });
     g.selectAll(".arc-node").each(function() {
-      const el = d3Selection2.select(this);
+      const el = d3Selection3.select(this);
       const name = el.attr("data-node");
       const isRelated = name === hovered || connected.has(name);
       el.attr("opacity", isRelated ? 1 : FADE_OPACITY);
@@ -4929,23 +6040,23 @@ function renderArcDiagram(container, parsed, palette, _isDark, onClickItem, expo
     const members = groupNodeSets.get(groupName);
     if (!members) return;
     g.selectAll(".arc-link").each(function() {
-      const el = d3Selection2.select(this);
+      const el = d3Selection3.select(this);
       const isRelated = members.has(el.attr("data-source")) || members.has(el.attr("data-target"));
       el.attr("stroke-opacity", isRelated ? 0.85 : FADE_OPACITY);
     });
     g.selectAll(".arc-node").each(function() {
-      const el = d3Selection2.select(this);
+      const el = d3Selection3.select(this);
       el.attr("opacity", members.has(el.attr("data-node")) ? 1 : FADE_OPACITY);
     });
     g.selectAll(".arc-group-band").each(function() {
-      const el = d3Selection2.select(this);
+      const el = d3Selection3.select(this);
       el.attr(
         "fill-opacity",
         el.attr("data-group") === groupName ? 0.18 : 0.03
       );
     });
     g.selectAll(".arc-group-label").each(function() {
-      const el = d3Selection2.select(this);
+      const el = d3Selection3.select(this);
       el.attr("fill-opacity", el.attr("data-group") === groupName ? 1 : 0.2);
     });
   }
@@ -5148,7 +6259,14 @@ function computeTimeTicks(domainMin, domainMax, scale, boundaryStart, boundaryEn
   const firstYear = Math.ceil(domainMin);
   const lastYear = Math.floor(domainMax);
   if (lastYear >= firstYear + 1) {
-    for (let y = firstYear; y <= lastYear; y++) {
+    const yearSpan = lastYear - firstYear;
+    let step = 1;
+    if (yearSpan > 80) step = 20;
+    else if (yearSpan > 40) step = 10;
+    else if (yearSpan > 20) step = 5;
+    else if (yearSpan > 10) step = 2;
+    const alignedFirst = Math.ceil(firstYear / step) * step;
+    for (let y = alignedFirst; y <= lastYear; y += step) {
       ticks.push({ pos: scale(y), label: String(y) });
     }
   } else if (span > 0.25) {
@@ -5248,7 +6366,7 @@ function showEventDatesOnScale(g, scale, startDate, endDate, innerHeight, accent
 function hideEventDatesOnScale(g) {
   g.selectAll(".tl-event-date").remove();
   g.selectAll(".tl-scale-tick").each(function() {
-    const el = d3Selection2.select(this);
+    const el = d3Selection3.select(this);
     const isDashed = el.attr("stroke-dasharray");
     el.attr("opacity", isDashed ? 0.15 : 0.4);
   });
@@ -5306,7 +6424,7 @@ function buildEraTooltipHtml(era) {
   return `<strong>${era.label}</strong><br>${formatDateLabel(era.startDate)} \u2192 ${formatDateLabel(era.endDate)}`;
 }
 function renderTimeline(container, parsed, palette, isDark, onClickItem, exportDims) {
-  d3Selection2.select(container).selectAll(":not([data-d3-tooltip])").remove();
+  d3Selection3.select(container).selectAll(":not([data-d3-tooltip])").remove();
   const {
     timelineEvents,
     timelineGroups,
@@ -5358,13 +6476,13 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
   const FADE_OPACITY = 0.1;
   function fadeToGroup(g, groupName) {
     g.selectAll(".tl-event").each(function() {
-      const el = d3Selection2.select(this);
+      const el = d3Selection3.select(this);
       const evGroup = el.attr("data-group");
       el.attr("opacity", evGroup === groupName ? 1 : FADE_OPACITY);
     });
     g.selectAll(".tl-legend-item, .tl-lane-header").each(
       function() {
-        const el = d3Selection2.select(this);
+        const el = d3Selection3.select(this);
         const name = el.attr("data-group");
         el.attr("opacity", name === groupName ? 1 : FADE_OPACITY);
       }
@@ -5376,7 +6494,7 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
   }
   function fadeToEra(g, eraStart, eraEnd) {
     g.selectAll(".tl-event").each(function() {
-      const el = d3Selection2.select(this);
+      const el = d3Selection3.select(this);
       const date = parseFloat(el.attr("data-date"));
       const endDate = el.attr("data-end-date");
       const evEnd = endDate ? parseFloat(endDate) : date;
@@ -5388,14 +6506,14 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
       FADE_OPACITY
     );
     g.selectAll(".tl-era").each(function() {
-      const el = d3Selection2.select(this);
+      const el = d3Selection3.select(this);
       const s = parseFloat(el.attr("data-era-start"));
       const e = parseFloat(el.attr("data-era-end"));
       const isSelf = s === eraStart && e === eraEnd;
       el.attr("opacity", isSelf ? 1 : FADE_OPACITY);
     });
     g.selectAll(".tl-marker").each(function() {
-      const el = d3Selection2.select(this);
+      const el = d3Selection3.select(this);
       const date = parseFloat(el.attr("data-marker-date"));
       const inside = date >= eraStart && date <= eraEnd;
       el.attr("opacity", inside ? 1 : FADE_OPACITY);
@@ -5427,7 +6545,7 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
       const innerHeight = height - margin.top - margin.bottom;
       const laneWidth = innerWidth / laneCount;
       const yScale = d3Scale.scaleLinear().domain([minDate - datePadding, maxDate + datePadding]).range([0, innerHeight]);
-      const svg = d3Selection2.select(container).append("svg").attr("width", width).attr("height", height).style("background", bgColor);
+      const svg = d3Selection3.select(container).append("svg").attr("width", width).attr("height", height).style("background", bgColor);
       const g = svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`);
       if (title) {
         svg.append("text").attr("x", width / 2).attr("y", 30).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", "20px").attr("font-weight", "700").text(title);
@@ -5521,7 +6639,7 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
       const axisX = 20;
       const yScale = d3Scale.scaleLinear().domain([minDate - datePadding, maxDate + datePadding]).range([0, innerHeight]);
       const sorted = timelineEvents.slice().sort((a, b) => parseTimelineDate(a.date) - parseTimelineDate(b.date));
-      const svg = d3Selection2.select(container).append("svg").attr("width", width).attr("height", height).style("background", bgColor);
+      const svg = d3Selection3.select(container).append("svg").attr("width", width).attr("height", height).style("background", bgColor);
       const g = svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`);
       if (title) {
         svg.append("text").attr("x", width / 2).attr("y", 30).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", "20px").attr("font-weight", "700").text(title);
@@ -5644,7 +6762,7 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
     const totalGaps = (lanes.length - 1) * GROUP_GAP;
     const rowH = Math.min(28, (innerHeight - totalGaps) / totalEventRows);
     const xScale = d3Scale.scaleLinear().domain([minDate - datePadding, maxDate + datePadding]).range([0, innerWidth]);
-    const svg = d3Selection2.select(container).append("svg").attr("width", width).attr("height", height).style("background", bgColor);
+    const svg = d3Selection3.select(container).append("svg").attr("width", width).attr("height", height).style("background", bgColor);
     const g = svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`);
     if (title) {
       svg.append("text").attr("x", width / 2).attr("y", 30).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", "20px").attr("font-weight", "700").text(title);
@@ -5748,7 +6866,7 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
           if (ev.uncertain) {
             const gradientId = `uncertain-${ev.lineNumber}`;
             const defs = svg.select("defs").node() || svg.append("defs").node();
-            d3Selection2.select(defs).append("linearGradient").attr("id", gradientId).attr("x1", "0%").attr("y1", "0%").attr("x2", "100%").attr("y2", "0%").selectAll("stop").data([
+            d3Selection3.select(defs).append("linearGradient").attr("id", gradientId).attr("x1", "0%").attr("y1", "0%").attr("x2", "100%").attr("y2", "0%").selectAll("stop").data([
               { offset: "0%", opacity: 1 },
               { offset: "80%", opacity: 1 },
               { offset: "100%", opacity: 0 }
@@ -5789,7 +6907,7 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
     const innerHeight = height - margin.top - margin.bottom;
     const rowH = Math.min(28, innerHeight / sorted.length);
     const xScale = d3Scale.scaleLinear().domain([minDate - datePadding, maxDate + datePadding]).range([0, innerWidth]);
-    const svg = d3Selection2.select(container).append("svg").attr("width", width).attr("height", height).style("background", bgColor);
+    const svg = d3Selection3.select(container).append("svg").attr("width", width).attr("height", height).style("background", bgColor);
     const g = svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`);
     if (title) {
       svg.append("text").attr("x", width / 2).attr("y", 30).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", "20px").attr("font-weight", "700").text(title);
@@ -5887,7 +7005,7 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
         if (ev.uncertain) {
           const gradientId = `uncertain-ts-${ev.lineNumber}`;
           const defs = svg.select("defs").node() || svg.append("defs").node();
-          d3Selection2.select(defs).append("linearGradient").attr("id", gradientId).attr("x1", "0%").attr("y1", "0%").attr("x2", "100%").attr("y2", "0%").selectAll("stop").data([
+          d3Selection3.select(defs).append("linearGradient").attr("id", gradientId).attr("x1", "0%").attr("y1", "0%").attr("x2", "100%").attr("y2", "0%").selectAll("stop").data([
             { offset: "0%", opacity: 1 },
             { offset: "80%", opacity: 1 },
             { offset: "100%", opacity: 0 }
@@ -5920,7 +7038,7 @@ function getRotateFn(mode) {
   return () => 0;
 }
 function renderWordCloud(container, parsed, palette, _isDark, onClickItem, exportDims) {
-  d3Selection2.select(container).selectAll(":not([data-d3-tooltip])").remove();
+  d3Selection3.select(container).selectAll(":not([data-d3-tooltip])").remove();
   const { words, title, cloudOptions } = parsed;
   if (words.length === 0) return;
   const width = exportDims?.width ?? container.clientWidth;
@@ -5941,7 +7059,7 @@ function renderWordCloud(container, parsed, palette, _isDark, onClickItem, expor
     return minSize + t * (maxSize - minSize);
   };
   const rotateFn = getRotateFn(cloudOptions.rotate);
-  const svg = d3Selection2.select(container).append("svg").attr("width", width).attr("height", height).style("background", bgColor);
+  const svg = d3Selection3.select(container).append("svg").attr("width", width).attr("height", height).style("background", bgColor);
   if (title) {
     svg.append("text").attr("x", width / 2).attr("y", 30).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", "20px").attr("font-weight", "700").text(title);
   }
@@ -5964,7 +7082,7 @@ function renderWordCloud(container, parsed, palette, _isDark, onClickItem, expor
 }
 function renderWordCloudAsync(container, parsed, palette, _isDark, exportDims) {
   return new Promise((resolve) => {
-    d3Selection2.select(container).selectAll(":not([data-d3-tooltip])").remove();
+    d3Selection3.select(container).selectAll(":not([data-d3-tooltip])").remove();
     const { words, title, cloudOptions } = parsed;
     if (words.length === 0) {
       resolve();
@@ -5991,7 +7109,7 @@ function renderWordCloudAsync(container, parsed, palette, _isDark, exportDims) {
       return minSize + t * (maxSize - minSize);
     };
     const rotateFn = getRotateFn(cloudOptions.rotate);
-    const svg = d3Selection2.select(container).append("svg").attr("width", width).attr("height", height).style("background", bgColor);
+    const svg = d3Selection3.select(container).append("svg").attr("width", width).attr("height", height).style("background", bgColor);
     if (title) {
       svg.append("text").attr("x", width / 2).attr("y", 30).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", "20px").attr("font-weight", "700").text(title);
     }
@@ -6135,7 +7253,7 @@ function circlePathD(cx, cy, r) {
   return `M${cx - r},${cy} A${r},${r} 0 1,0 ${cx + r},${cy} A${r},${r} 0 1,0 ${cx - r},${cy} Z`;
 }
 function renderVenn(container, parsed, palette, isDark, onClickItem, exportDims) {
-  d3Selection2.select(container).selectAll(":not([data-d3-tooltip])").remove();
+  d3Selection3.select(container).selectAll(":not([data-d3-tooltip])").remove();
   const { vennSets, vennOverlaps, vennShowValues, title } = parsed;
   if (vennSets.length < 2) return;
   const width = exportDims?.width ?? container.clientWidth;
@@ -6200,7 +7318,7 @@ function renderVenn(container, parsed, palette, isDark, onClickItem, exportDims)
   const setColors = vennSets.map(
     (s, i) => s.color ?? colors[i % colors.length]
   );
-  const svg = d3Selection2.select(container).append("svg").attr("width", width).attr("height", height).style("background", bgColor);
+  const svg = d3Selection3.select(container).append("svg").attr("width", width).attr("height", height).style("background", bgColor);
   const tooltip = createTooltip(container, palette, isDark);
   if (title) {
     svg.append("text").attr("x", width / 2).attr("y", 30).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", "20px").attr("font-weight", "700").text(title);
@@ -6346,7 +7464,7 @@ function renderVenn(container, parsed, palette, isDark, onClickItem, exportDims)
   });
 }
 function renderQuadrant(container, parsed, palette, isDark, onClickItem, exportDims) {
-  d3Selection2.select(container).selectAll(":not([data-d3-tooltip])").remove();
+  d3Selection3.select(container).selectAll(":not([data-d3-tooltip])").remove();
   const {
     title,
     quadrantLabels,
@@ -6378,7 +7496,7 @@ function renderQuadrant(container, parsed, palette, isDark, onClickItem, exportD
   const chartHeight = height - margin.top - margin.bottom;
   const xScale = d3Scale.scaleLinear().domain([0, 1]).range([0, chartWidth]);
   const yScale = d3Scale.scaleLinear().domain([0, 1]).range([chartHeight, 0]);
-  const svg = d3Selection2.select(container).append("svg").attr("width", width).attr("height", height).style("background", bgColor);
+  const svg = d3Selection3.select(container).append("svg").attr("width", width).attr("height", height).style("background", bgColor);
   const tooltip = createTooltip(container, palette, isDark);
   if (title) {
     const titleText = svg.append("text").attr("x", width / 2).attr("y", 30).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", "20px").attr("font-weight", "700").style(
@@ -6387,9 +7505,9 @@ function renderQuadrant(container, parsed, palette, isDark, onClickItem, exportD
     ).text(title);
     if (onClickItem && quadrantTitleLineNumber) {
       titleText.on("click", () => onClickItem(quadrantTitleLineNumber)).on("mouseenter", function() {
-        d3Selection2.select(this).attr("opacity", 0.7);
+        d3Selection3.select(this).attr("opacity", 0.7);
       }).on("mouseleave", function() {
-        d3Selection2.select(this).attr("opacity", 1);
+        d3Selection3.select(this).attr("opacity", 1);
       });
     }
   }
@@ -6472,9 +7590,9 @@ function renderQuadrant(container, parsed, palette, isDark, onClickItem, exportD
     quadrantLabelTexts.on("click", (_, d) => {
       if (d.label?.lineNumber) onClickItem(d.label.lineNumber);
     }).on("mouseenter", function() {
-      d3Selection2.select(this).attr("opacity", 0.7);
+      d3Selection3.select(this).attr("opacity", 0.7);
     }).on("mouseleave", function() {
-      d3Selection2.select(this).attr("opacity", 1);
+      d3Selection3.select(this).attr("opacity", 1);
     });
   }
   if (quadrantXAxis) {
@@ -6489,9 +7607,9 @@ function renderQuadrant(container, parsed, palette, isDark, onClickItem, exportD
     if (onClickItem && quadrantXAxisLineNumber) {
       [xLowLabel, xHighLabel].forEach((label) => {
         label.on("click", () => onClickItem(quadrantXAxisLineNumber)).on("mouseenter", function() {
-          d3Selection2.select(this).attr("opacity", 0.7);
+          d3Selection3.select(this).attr("opacity", 0.7);
         }).on("mouseleave", function() {
-          d3Selection2.select(this).attr("opacity", 1);
+          d3Selection3.select(this).attr("opacity", 1);
         });
       });
     }
@@ -6510,9 +7628,9 @@ function renderQuadrant(container, parsed, palette, isDark, onClickItem, exportD
     if (onClickItem && quadrantYAxisLineNumber) {
       [yLowLabel, yHighLabel].forEach((label) => {
         label.on("click", () => onClickItem(quadrantYAxisLineNumber)).on("mouseenter", function() {
-          d3Selection2.select(this).attr("opacity", 0.7);
+          d3Selection3.select(this).attr("opacity", 0.7);
         }).on("mouseleave", function() {
-          d3Selection2.select(this).attr("opacity", 1);
+          d3Selection3.select(this).attr("opacity", 1);
         });
       });
     }
@@ -6560,7 +7678,7 @@ function renderQuadrant(container, parsed, palette, isDark, onClickItem, exportD
     pointsG.selectAll("g.point-group").each(function(_2, i) {
       const pt = quadrantPoints[i];
       const ptQuad = getPointQuadrant(pt.x, pt.y);
-      d3Selection2.select(this).attr("opacity", ptQuad === d.position ? 1 : 0.2);
+      d3Selection3.select(this).attr("opacity", ptQuad === d.position ? 1 : 0.2);
     });
   }).on("mouseleave", () => {
     quadrantRects.attr("opacity", 1);
@@ -6575,6 +7693,43 @@ function renderQuadrant(container, parsed, palette, isDark, onClickItem, exportD
 var EXPORT_WIDTH = 1200;
 var EXPORT_HEIGHT = 800;
 async function renderD3ForExport(content, theme, palette) {
+  const { parseDgmoChartType: parseDgmoChartType2 } = await Promise.resolve().then(() => (init_dgmo_router(), dgmo_router_exports));
+  const detectedType = parseDgmoChartType2(content);
+  if (detectedType === "flowchart") {
+    const { parseFlowchart: parseFlowchart2 } = await Promise.resolve().then(() => (init_flowchart_parser(), flowchart_parser_exports));
+    const { layoutGraph: layoutGraph2 } = await Promise.resolve().then(() => (init_layout(), layout_exports));
+    const { renderFlowchart: renderFlowchart2 } = await Promise.resolve().then(() => (init_flowchart_renderer(), flowchart_renderer_exports));
+    const isDark2 = theme === "dark";
+    const { getPalette: getPalette3 } = await Promise.resolve().then(() => (init_palettes(), palettes_exports));
+    const effectivePalette2 = palette ?? (isDark2 ? getPalette3("nord").dark : getPalette3("nord").light);
+    const fcParsed = parseFlowchart2(content, effectivePalette2);
+    if (fcParsed.error || fcParsed.nodes.length === 0) return "";
+    const layout = layoutGraph2(fcParsed);
+    const container2 = document.createElement("div");
+    container2.style.width = `${EXPORT_WIDTH}px`;
+    container2.style.height = `${EXPORT_HEIGHT}px`;
+    container2.style.position = "absolute";
+    container2.style.left = "-9999px";
+    document.body.appendChild(container2);
+    try {
+      renderFlowchart2(container2, fcParsed, layout, effectivePalette2, isDark2, void 0, {
+        width: EXPORT_WIDTH,
+        height: EXPORT_HEIGHT
+      });
+      const svgEl = container2.querySelector("svg");
+      if (!svgEl) return "";
+      if (theme === "transparent") {
+        svgEl.style.background = "none";
+      } else if (!svgEl.style.background) {
+        svgEl.style.background = effectivePalette2.bg;
+      }
+      svgEl.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+      svgEl.style.fontFamily = FONT_FAMILY;
+      return svgEl.outerHTML;
+    } finally {
+      document.body.removeChild(container2);
+    }
+  }
   const parsed = parseD3(content, palette);
   if (parsed.error && parsed.type !== "sequence") {
     const looksLikeSequence2 = /->|~>|<-/.test(content);
@@ -6669,17 +7824,17 @@ function parseQuadrant(content) {
   };
   const lines = content.split("\n");
   for (let i = 0; i < lines.length; i++) {
-    const line2 = lines[i].trim();
+    const line3 = lines[i].trim();
     const lineNumber = i + 1;
-    if (!line2 || line2.startsWith("#") || line2.startsWith("//")) continue;
-    if (/^chart\s*:/i.test(line2)) continue;
-    const titleMatch = line2.match(/^title\s*:\s*(.+)/i);
+    if (!line3 || line3.startsWith("#") || line3.startsWith("//")) continue;
+    if (/^chart\s*:/i.test(line3)) continue;
+    const titleMatch = line3.match(/^title\s*:\s*(.+)/i);
     if (titleMatch) {
       result.title = titleMatch[1].trim();
       result.titleLineNumber = lineNumber;
       continue;
     }
-    const xMatch = line2.match(/^x-axis\s*:\s*(.+)/i);
+    const xMatch = line3.match(/^x-axis\s*:\s*(.+)/i);
     if (xMatch) {
       const parts = xMatch[1].split(",").map((s) => s.trim());
       if (parts.length >= 2) {
@@ -6688,7 +7843,7 @@ function parseQuadrant(content) {
       }
       continue;
     }
-    const yMatch = line2.match(/^y-axis\s*:\s*(.+)/i);
+    const yMatch = line3.match(/^y-axis\s*:\s*(.+)/i);
     if (yMatch) {
       const parts = yMatch[1].split(",").map((s) => s.trim());
       if (parts.length >= 2) {
@@ -6697,7 +7852,7 @@ function parseQuadrant(content) {
       }
       continue;
     }
-    const posMatch = line2.match(
+    const posMatch = line3.match(
       /^(top-right|top-left|bottom-left|bottom-right)\s*:\s*(.+)/i
     );
     if (posMatch) {
@@ -6718,7 +7873,7 @@ function parseQuadrant(content) {
       }
       continue;
     }
-    const pointMatch = line2.match(DATA_POINT_RE);
+    const pointMatch = line3.match(DATA_POINT_RE);
     if (pointMatch) {
       const key = pointMatch[1].trim().toLowerCase();
       if (!QUADRANT_POSITIONS.has(key)) {
@@ -6792,6 +7947,9 @@ function buildMermaidQuadrant(parsed, options = {}) {
 }
 
 // src/index.ts
+init_flowchart_parser();
+init_layout();
+init_flowchart_renderer();
 init_renderer();
 init_colors();
 init_palettes();
@@ -6825,7 +7983,10 @@ export {
   hslToHex,
   inferParticipantType,
   isSequenceBlock,
+  isSequenceNote,
   isValidHex,
+  layoutGraph,
+  looksLikeFlowchart,
   looksLikeSequence,
   mute,
   nord,
@@ -6836,6 +7997,7 @@ export {
   parseD3,
   parseDgmoChartType,
   parseEChart,
+  parseFlowchart,
   parseQuadrant,
   parseSequenceDgmo,
   parseTimelineDate,
@@ -6843,6 +8005,8 @@ export {
   renderArcDiagram,
   renderD3ForExport,
   renderEChartsForExport,
+  renderFlowchart,
+  renderFlowchartForExport,
   renderQuadrant,
   renderSequenceDiagram,
   renderSlopeChart,