@diagrammo/dgmo 0.2.27 → 0.3.0

package/src/org/parser.ts

@@ -1,26 +1,25 @@
-import { resolveColor } from '../colors';
 import type { PaletteColors } from '../palettes';
 import type { DgmoError } from '../diagnostics';
 import { makeDgmoError, formatDgmoError, suggest } from '../diagnostics';
+import type { TagGroup, TagEntry } from '../utils/tag-groups';
+import { isTagBlockHeading, matchTagBlockHeading } from '../utils/tag-groups';
+import {
+  measureIndent,
+  extractColor,
+  parsePipeMetadata,
+  CHART_TYPE_RE,
+  TITLE_RE,
+  OPTION_RE,
+} from '../utils/parsing';
 
 // ============================================================
 // Types
 // ============================================================
 
-export interface OrgTagEntry {
-  value: string;
-  color: string;
-  lineNumber: number;
-}
-
-export interface OrgTagGroup {
-  name: string;
-  alias?: string;
-  entries: OrgTagEntry[];
-  /** Value of the entry marked `default` (nodes without metadata get this) */
-  defaultValue?: string;
-  lineNumber: number;
-}
+/** @deprecated Use `TagEntry` from `utils/tag-groups` */
+export type OrgTagEntry = TagEntry;
+/** @deprecated Use `TagGroup` from `utils/tag-groups` */
+export type OrgTagGroup = TagGroup;
 
 export interface OrgNode {
   id: string;
@@ -47,48 +46,19 @@ export interface ParsedOrg {
 // Helpers
 // ============================================================
 
-function measureIndent(line: string): number {
-  let indent = 0;
-  for (const ch of line) {
-    if (ch === ' ') indent++;
-    else if (ch === '\t') indent += 4;
-    else break;
-  }
-  return indent;
-}
-
-const COLOR_SUFFIX_RE = /\(([^)]+)\)\s*$/;
-
-function extractColor(
-  label: string,
-  palette?: PaletteColors
-): { label: string; color?: string } {
-  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),
-  };
-}
-
-const GROUP_HEADING_RE = /^##\s+(.+?)(?:\s+alias\s+(\w+))?(?:\s*\(([^)]+)\))?\s*$/;
 const CONTAINER_RE = /^\[([^\]]+)\]$/;
 const METADATA_RE = /^([^:]+):\s*(.+)$/;
-const CHART_TYPE_RE = /^chart\s*:\s*(.+)/i;
-const TITLE_RE = /^title\s*:\s*(.+)/i;
-const OPTION_RE = /^([a-z][a-z0-9-]*)\s*:\s*(.+)$/i;
 
 // ============================================================
 // Inference
 // ============================================================
 
-/** Returns true if content contains tag group headings (`## ...`), suggesting an org chart. */
+/** Returns true if content contains tag group headings (`tag: …` or `## …`), suggesting an org chart. */
 export function looksLikeOrg(content: string): boolean {
   for (const line of content.split('\n')) {
     const trimmed = line.trim();
     if (!trimmed || trimmed.startsWith('//')) continue;
-    if (GROUP_HEADING_RE.test(trimmed)) return true;
+    if (isTagBlockHeading(trimmed)) return true;
   }
   return false;
 }
@@ -125,6 +95,11 @@ export function parseOrg(
     if (!result.error) result.error = formatDgmoError(diag);
   };
 
+  /** Push a non-fatal warning (does not set result.error). */
+  const pushWarning = (line: number, message: string): void => {
+    result.diagnostics.push(makeDgmoError(line, message, 'warning'));
+  };
+
   if (!content || !content.trim()) {
     return fail(0, 'No content provided');
   }
@@ -189,41 +164,43 @@ export function parseOrg(
       }
     }
 
-    // Generic header options (key: value lines before content/tag groups)
-    // Only match non-indented lines with simple hyphenated keys
-    if (!contentStarted && !currentTagGroup && measureIndent(line) === 0) {
-      const optMatch = trimmed.match(OPTION_RE);
-      if (optMatch && !trimmed.startsWith('##')) {
-        const key = optMatch[1].trim().toLowerCase();
-        if (key !== 'chart' && key !== 'title') {
-          result.options[key] = optMatch[2].trim();
-          continue;
-        }
-      }
-    }
-
-    // ## Tag group heading
-    const groupMatch = trimmed.match(GROUP_HEADING_RE);
-    if (groupMatch) {
+    // Tag group heading — `tag: Name` (new) or `## Name` (deprecated)
+    // Must be checked BEFORE OPTION_RE to prevent `tag: Rank` being swallowed as option `tag=Rank`
+    const tagBlockMatch = matchTagBlockHeading(trimmed);
+    if (tagBlockMatch) {
       if (contentStarted) {
-        pushError(lineNumber, 'Tag groups (##) must appear before org content');
+        pushError(lineNumber, 'Tag groups must appear before org content');
         continue;
       }
-      const groupName = groupMatch[1].trim();
-      const alias = groupMatch[2] || undefined;
+      if (tagBlockMatch.deprecated) {
+        pushWarning(lineNumber, `'## ${tagBlockMatch.name}' is deprecated for tag groups — use 'tag: ${tagBlockMatch.name}' instead`);
+      }
       currentTagGroup = {
-        name: groupName,
-        alias,
+        name: tagBlockMatch.name,
+        alias: tagBlockMatch.alias,
         entries: [],
         lineNumber,
       };
-      if (alias) {
-        aliasMap.set(alias.toLowerCase(), groupName.toLowerCase());
+      if (tagBlockMatch.alias) {
+        aliasMap.set(tagBlockMatch.alias.toLowerCase(), tagBlockMatch.name.toLowerCase());
       }
       result.tagGroups.push(currentTagGroup);
       continue;
     }
 
+    // Generic header options (key: value lines before content/tag groups)
+    // Only match non-indented lines with simple hyphenated keys
+    if (!contentStarted && !currentTagGroup && measureIndent(line) === 0) {
+      const optMatch = trimmed.match(OPTION_RE);
+      if (optMatch) {
+        const key = optMatch[1].trim().toLowerCase();
+        if (key !== 'chart' && key !== 'title') {
+          result.options[key] = optMatch[2].trim();
+          continue;
+        }
+      }
+    }
+
     // Tag group entries (indented Value(color) [default] under ## heading)
     if (currentTagGroup && !contentStarted) {
       const indent = measureIndent(line);
@@ -342,24 +319,7 @@ function parseNodeLabel(
   let rawLabel = segments[0];
   const { label, color } = extractColor(rawLabel, palette);
 
-  const metadata: Record<string, string> = {};
-  // Collect all metadata parts: split pipe segments further on commas
-  const metaParts: string[] = [];
-  for (let j = 1; j < segments.length; j++) {
-    for (const part of segments[j].split(',')) {
-      const trimmedPart = part.trim();
-      if (trimmedPart) metaParts.push(trimmedPart);
-    }
-  }
-  for (const part of metaParts) {
-    const colonIdx = part.indexOf(':');
-    if (colonIdx > 0) {
-      const rawKey = part.substring(0, colonIdx).trim().toLowerCase();
-      const key = aliasMap.get(rawKey) ?? rawKey;
-      const value = part.substring(colonIdx + 1).trim();
-      metadata[key] = value;
-    }
-  }
+  const metadata = parsePipeMetadata(segments, aliasMap);
 
   return {
     id: `node-${counter}`,

package/src/org/resolver.ts

@@ -1,5 +1,6 @@
 import type { DgmoError } from '../diagnostics';
 import { makeDgmoError } from '../diagnostics';
+import { isTagBlockHeading, matchTagBlockHeading } from '../utils/tag-groups';
 
 // ============================================================
 // Types
@@ -25,7 +26,6 @@ const IMPORT_RE = /^(\s+)import:\s+(.+\.dgmo)\s*$/i;
 const TAGS_RE = /^tags:\s+(.+\.dgmo)\s*$/i;
 const HEADER_RE = /^(chart|title)\s*:/i;
 const OPTION_RE = /^[a-z][a-z0-9-]*\s*:/i;
-const GROUP_HEADING_RE = /^##\s+/;
 
 // ============================================================
 // Path Helpers (pure string ops — no Node `path` dependency)
@@ -67,10 +67,9 @@ function extractTagGroups(lines: string[]): TagGroupBlock[] {
 
   for (const line of lines) {
     const trimmed = line.trim();
-    if (GROUP_HEADING_RE.test(trimmed)) {
-      // Extract group name (everything after "## " up to optional alias/color)
-      const nameMatch = trimmed.match(/^##\s+(.+?)(?:\s+alias\s+\w+)?(?:\s*\([^)]+\))?\s*$/);
-      const name = nameMatch ? nameMatch[1].trim().toLowerCase() : trimmed.substring(3).trim().toLowerCase();
+    const headingMatch = matchTagBlockHeading(trimmed);
+    if (headingMatch) {
+      const name = headingMatch.name.toLowerCase();
       current = { name, lines: [line] };
       blocks.push(current);
     } else if (current) {
@@ -144,7 +143,7 @@ function parseFileHeader(lines: string[]): ParsedHeader {
       }
 
       // Other option-like header lines (non-indented key: value)
-      if (OPTION_RE.test(trimmed) && !trimmed.startsWith('##') && !lines[i].match(/^\s/)) {
+      if (OPTION_RE.test(trimmed) && !isTagBlockHeading(trimmed) && !lines[i].match(/^\s/)) {
         // Check it's not a content line (node with metadata)
         const key = trimmed.split(':')[0].trim().toLowerCase();
         if (key !== 'chart' && key !== 'title' && !trimmed.includes('|')) {
@@ -207,7 +206,7 @@ async function resolveFile(
       headerLines.push(lines[i]);
       continue;
     }
-    if (GROUP_HEADING_RE.test(trimmed)) continue; // skip inline tag group headings
+    if (isTagBlockHeading(trimmed)) continue; // skip inline tag group headings
     if (lines[i] !== trimmed) continue; // skip tag group entries (indented lines)
 
     const tagsMatch = trimmed.match(TAGS_RE);
@@ -248,7 +247,7 @@ async function resolveFile(
     if (!importMatch) {
       // Pass through — skip inline tag group lines (already extracted above)
       const trimmed = line.trim();
-      if (GROUP_HEADING_RE.test(trimmed) || (inlineTagGroups.length > 0 && isTagGroupEntry(line, bodyLines, i))) {
+      if (isTagBlockHeading(trimmed) || (inlineTagGroups.length > 0 && isTagGroupEntry(line, bodyLines, i))) {
         continue;
       }
       resolvedBodyLines.push(line);
@@ -386,7 +385,7 @@ function findBodyStart(lines: string[]): number {
     }
 
     // Tag group heading
-    if (GROUP_HEADING_RE.test(trimmed)) {
+    if (isTagBlockHeading(trimmed)) {
       inTagGroup = true;
       continue;
     }
@@ -405,7 +404,7 @@ function findBodyStart(lines: string[]): number {
     if (TAGS_RE.test(trimmed)) continue;
 
     // Option-like lines (non-indented key: value before content)
-    if (OPTION_RE.test(trimmed) && !lines[i].match(/^\s/) && !trimmed.includes('|')) {
+    if (OPTION_RE.test(trimmed) && !isTagBlockHeading(trimmed) && !lines[i].match(/^\s/) && !trimmed.includes('|')) {
       const key = trimmed.split(':')[0].trim().toLowerCase();
       if (key !== 'chart' && key !== 'title') {
         continue;
@@ -420,7 +419,7 @@ function findBodyStart(lines: string[]): number {
 }
 
 /**
- * Check if a line is a tag group entry (indented line under a ## heading).
+ * Check if a line is a tag group entry (indented line under a tag block heading).
  */
 function isTagGroupEntry(line: string, allLines: string[], index: number): boolean {
   if (!line.match(/^\s+/)) return false;
@@ -428,7 +427,7 @@ function isTagGroupEntry(line: string, allLines: string[], index: number): boole
   for (let i = index - 1; i >= 0; i--) {
     const prev = allLines[i].trim();
     if (prev === '' || prev.startsWith('//')) continue;
-    if (GROUP_HEADING_RE.test(prev)) return true;
+    if (isTagBlockHeading(prev)) return true;
     if (allLines[i].match(/^\s+/)) continue; // another entry
     return false;
   }

package/src/sequence/parser.ts

@@ -5,6 +5,8 @@
 import { inferParticipantType } from './participant-inference';
 import type { DgmoError } from '../diagnostics';
 import { makeDgmoError, formatDgmoError, suggest } from '../diagnostics';
+import { parseArrow } from '../utils/arrows';
+import { measureIndent } from '../utils/parsing';
 
 /**
  * Participant types that can be declared via "Name is a type" syntax.
@@ -60,6 +62,7 @@ export interface SequenceMessage {
   returnLabel?: string;
   lineNumber: number;
   async?: boolean;
+  bidirectional?: boolean;
 }
 
 /**
@@ -159,8 +162,9 @@ const GROUP_HEADING_PATTERN = /^##\s+(.+?)(?:\(([^)]+)\))?\s*$/;
 // Section divider pattern — "== Label ==", "== Label(color) ==", or "== Label" (trailing == optional)
 const SECTION_PATTERN = /^==\s+(.+?)(?:\s*==)?\s*$/;
 
-// Arrow pattern for sequence inference — "A -> B: message" or "A ~> B: message"
-const ARROW_PATTERN = /\S+\s*(?:->|~>)\s*\S+/;
+// Arrow pattern for sequence inference — "A -> B: message", "A ~> B: message",
+// "A -label-> B", "A ~label~> B", "A <-> B", "A <~> B"
+const ARROW_PATTERN = /\S+\s*(?:<->|<~>|->|~>|-\S+->|~\S+~>|<-\S+->|<~\S+~>)\s*\S+/;
 
 // <- return syntax: "Login <- 200 OK"
 const ARROW_RETURN_PATTERN = /^(.+?)\s*<-\s*(.+)$/;
@@ -212,19 +216,6 @@ function parseReturnLabel(rawLabel: string): {
   return { label: rawLabel };
 }
 
-/**
- * Measure leading whitespace of a line, normalizing tabs to 4 spaces.
- */
-function measureIndent(line: string): number {
-  let indent = 0;
-  for (const ch of line) {
-    if (ch === ' ') indent++;
-    else if (ch === '\t') indent += 4;
-    else break;
-  }
-  return indent;
-}
-
 /**
  * Parse a .dgmo file with `chart: sequence` into a structured representation.
  */
@@ -519,6 +510,97 @@ export function parseSequenceDgmo(content: string): ParsedSequenceDgmo {
       continue;
     }
 
+    // ---- Labeled arrows: -label->, ~label~>, <-label->, <~label~> ----
+    // Must be checked BEFORE plain arrow patterns to avoid partial matches
+    const labeledArrow = parseArrow(trimmed);
+    if (labeledArrow && 'error' in labeledArrow) {
+      pushError(lineNumber, labeledArrow.error);
+      continue;
+    }
+    if (labeledArrow) {
+      contentStarted = true;
+      const { from, to, label, async: isAsync, bidirectional } = labeledArrow;
+      lastMsgFrom = from;
+
+      const msg: SequenceMessage = {
+        from,
+        to,
+        label,
+        returnLabel: undefined,
+        lineNumber,
+        ...(isAsync ? { async: true } : {}),
+        ...(bidirectional ? { bidirectional: true } : {}),
+      };
+      result.messages.push(msg);
+      currentContainer().push(msg);
+
+      // Auto-register participants
+      if (!result.participants.some((p) => p.id === from)) {
+        result.participants.push({
+          id: from,
+          label: from,
+          type: inferParticipantType(from),
+          lineNumber,
+        });
+      }
+      if (!result.participants.some((p) => p.id === to)) {
+        result.participants.push({
+          id: to,
+          label: to,
+          type: inferParticipantType(to),
+          lineNumber,
+        });
+      }
+      continue;
+    }
+
+    // ---- Plain bidi arrows: <-> and <~> ----
+    // Must be checked BEFORE unidirectional plain arrows
+    const bidiSyncMatch = trimmed.match(
+      /^(\S+)\s*<->\s*([^\s:]+)\s*(?::\s*(.+))?$/
+    );
+    const bidiAsyncMatch = trimmed.match(
+      /^(\S+)\s*<~>\s*([^\s:]+)\s*(?::\s*(.+))?$/
+    );
+    const bidiMatch = bidiSyncMatch || bidiAsyncMatch;
+    if (bidiMatch) {
+      contentStarted = true;
+      const from = bidiMatch[1];
+      const to = bidiMatch[2];
+      lastMsgFrom = from;
+      const rawLabel = bidiMatch[3]?.trim() || '';
+      const isBidiAsync = !!bidiAsyncMatch;
+
+      const msg: SequenceMessage = {
+        from,
+        to,
+        label: rawLabel,
+        lineNumber,
+        bidirectional: true,
+        ...(isBidiAsync ? { async: true } : {}),
+      };
+      result.messages.push(msg);
+      currentContainer().push(msg);
+
+      if (!result.participants.some((p) => p.id === from)) {
+        result.participants.push({
+          id: from,
+          label: from,
+          type: inferParticipantType(from),
+          lineNumber,
+        });
+      }
+      if (!result.participants.some((p) => p.id === to)) {
+        result.participants.push({
+          id: to,
+          label: to,
+          type: inferParticipantType(to),
+          lineNumber,
+        });
+      }
+      continue;
+    }
+
     // Match ~> (async arrow) or -> (sync arrow)
     let isAsync = false;
     const asyncArrowMatch = trimmed.match(

package/src/sequence/renderer.ts

@@ -5,6 +5,13 @@
 import * as d3Selection from 'd3-selection';
 import type { PaletteColors } from '../palettes';
 import { resolveColor } from '../colors';
+import {
+  parseInlineMarkdown,
+  truncateBareUrl,
+  renderInlineText,
+} from '../utils/inline-markdown';
+export type { InlineSpan } from '../utils/inline-markdown';
+export { parseInlineMarkdown, truncateBareUrl };
 import { FONT_FAMILY } from '../fonts';
 import type {
   ParsedSequenceDgmo,
@@ -44,74 +51,6 @@ const NOTE_CHARS_PER_LINE = Math.floor((NOTE_MAX_W - NOTE_PAD_H * 2 - NOTE_FOLD)
 const COLLAPSED_NOTE_H = 20;
 const COLLAPSED_NOTE_W = 40;
 
-interface InlineSpan {
-  text: string;
-  bold?: boolean;
-  italic?: boolean;
-  code?: boolean;
-  href?: string;
-}
-
-export function parseInlineMarkdown(text: string): InlineSpan[] {
-  const spans: InlineSpan[] = [];
-  const regex =
-    /\*\*(.+?)\*\*|__(.+?)__|\*(.+?)\*|_(.+?)_|`(.+?)`|\[(.+?)\]\((.+?)\)|(https?:\/\/[^\s)>\]]+|www\.[^\s)>\]]+)|([^*_`[]+?(?=https?:\/\/|www\.|$)|[^*_`[]+)/g;
-  let match;
-  while ((match = regex.exec(text)) !== null) {
-    if (match[1]) spans.push({ text: match[1], bold: true });       // **bold**
-    else if (match[2]) spans.push({ text: match[2], bold: true });  // __bold__
-    else if (match[3]) spans.push({ text: match[3], italic: true }); // *italic*
-    else if (match[4]) spans.push({ text: match[4], italic: true }); // _italic_
-    else if (match[5]) spans.push({ text: match[5], code: true });   // `code`
-    else if (match[6]) spans.push({ text: match[6], href: match[7] }); // [text](url)
-    else if (match[8]) {                                              // bare URL
-      const url = match[8];
-      const href = url.startsWith('www.') ? `https://${url}` : url;
-      spans.push({ text: url, href });
-    } else if (match[9]) spans.push({ text: match[9] });             // plain text
-  }
-  return spans;
-}
-
-const BARE_URL_MAX_DISPLAY = 35;
-
-export function truncateBareUrl(url: string): string {
-  const stripped = url.replace(/^https?:\/\//, '').replace(/^www\./, '');
-  if (stripped.length <= BARE_URL_MAX_DISPLAY) return stripped;
-  return stripped.slice(0, BARE_URL_MAX_DISPLAY - 1) + '\u2026';
-}
-
-function renderInlineText(
-  textEl: d3Selection.Selection<SVGTextElement, unknown, null, undefined>,
-  text: string,
-  palette: PaletteColors,
-  fontSize?: number
-): void {
-  const spans = parseInlineMarkdown(text);
-  for (const span of spans) {
-    if (span.href) {
-      // Bare URLs (text === href or href with https:// prepended) get truncated display;
-      // markdown links [text](url) keep their user-chosen text as-is.
-      const isBareUrl =
-        span.text === span.href ||
-        `https://${span.text}` === span.href;
-      const display = isBareUrl ? truncateBareUrl(span.text) : span.text;
-      const a = textEl.append('a').attr('href', span.href);
-      a.append('tspan')
-        .text(display)
-        .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');
-        if (fontSize) tspan.attr('font-size', fontSize - 1);
-      }
-    }
-  }
-}
 
 function wrapTextLines(text: string, maxChars: number): string[] {
   const rawLines = text.split('\n');
@@ -599,6 +538,7 @@ export interface RenderStep {
   label: string;
   messageIndex: number;
   async?: boolean;
+  bidirectional?: boolean;
 }
 
 /**
@@ -639,8 +579,14 @@ export function buildRenderSequence(messages: SequenceMessage[]): RenderStep[] {
       label: msg.label,
       messageIndex: mi,
       ...(msg.async ? { async: true } : {}),
+      ...(msg.bidirectional ? { bidirectional: true } : {}),
     });
 
+    // Bidirectional messages: no activation bar, no return
+    if (msg.bidirectional) {
+      continue;
+    }
+
     // Async messages: no return arrow, no activation on target
     if (msg.async) {
       continue;
@@ -1400,6 +1346,42 @@ export function renderSequenceDiagram(
     .attr('stroke', palette.text)
     .attr('stroke-width', 1.2);
 
+  // Filled reverse arrowhead for bidirectional sync arrows (marker-start)
+  defs
+    .append('marker')
+    .attr('id', 'seq-arrowhead-reverse')
+    .attr('viewBox', `0 0 ${ARROWHEAD_SIZE} ${ARROWHEAD_SIZE}`)
+    .attr('refX', 0)
+    .attr('refY', ARROWHEAD_SIZE / 2)
+    .attr('markerWidth', ARROWHEAD_SIZE)
+    .attr('markerHeight', ARROWHEAD_SIZE)
+    .attr('orient', 'auto')
+    .append('polygon')
+    .attr(
+      'points',
+      `${ARROWHEAD_SIZE},0 0,${ARROWHEAD_SIZE / 2} ${ARROWHEAD_SIZE},${ARROWHEAD_SIZE}`
+    )
+    .attr('fill', palette.text);
+
+  // Open reverse arrowhead for bidirectional async arrows (marker-start)
+  defs
+    .append('marker')
+    .attr('id', 'seq-arrowhead-async-reverse')
+    .attr('viewBox', `0 0 ${ARROWHEAD_SIZE} ${ARROWHEAD_SIZE}`)
+    .attr('refX', 0)
+    .attr('refY', ARROWHEAD_SIZE / 2)
+    .attr('markerWidth', ARROWHEAD_SIZE)
+    .attr('markerHeight', ARROWHEAD_SIZE)
+    .attr('orient', 'auto')
+    .append('polyline')
+    .attr(
+      'points',
+      `${ARROWHEAD_SIZE},0 0,${ARROWHEAD_SIZE / 2} ${ARROWHEAD_SIZE},${ARROWHEAD_SIZE}`
+    )
+    .attr('fill', 'none')
+    .attr('stroke', palette.text)
+    .attr('stroke-width', 1.2);
+
   // Render title
   if (title) {
     const titleEl = svg
@@ -1954,7 +1936,12 @@ export function renderSequenceDiagram(
         const markerRef = step.async
           ? 'url(#seq-arrowhead-async)'
           : 'url(#seq-arrowhead)';
-        svg
+        const markerStartRef = step.bidirectional
+          ? step.async
+            ? 'url(#seq-arrowhead-async-reverse)'
+            : 'url(#seq-arrowhead-reverse)'
+          : null;
+        const line = svg
           .append('line')
           .attr('x1', x1)
           .attr('y1', y)
@@ -1970,6 +1957,12 @@ export function renderSequenceDiagram(
           )
           .attr('data-msg-index', String(step.messageIndex))
           .attr('data-step-index', String(i));
+        if (markerStartRef) {
+          line.attr('marker-start', markerStartRef);
+        }
+        if (step.bidirectional && step.async) {
+          line.attr('stroke-dasharray', '6 4');
+        }
 
         if (step.label) {
           const midX = (x1 + x2) / 2;

package/src/utils/arrows.ts

@@ -0,0 +1,75 @@
+// ============================================================
+// Shared Arrow Parsing Utility
+// ============================================================
+//
+// Labeled arrow syntax: `-label->`, `~label~>`, `<-label->`, `<~label~>`
+// Used by sequence, C4, and init-status parsers.
+
+export interface ParsedArrow {
+  from: string;
+  to: string;
+  label: string;
+  async: boolean;
+  bidirectional: boolean;
+}
+
+// Bidi patterns checked FIRST — longer prefix avoids partial match
+const BIDI_SYNC_LABELED_RE = /^(\S+)\s+<-(.+)->\s+(\S+)$/;
+const BIDI_ASYNC_LABELED_RE = /^(\S+)\s+<~(.+)~>\s+(\S+)$/;
+const SYNC_LABELED_RE = /^(\S+)\s+-(.+)->\s+(\S+)$/;
+const ASYNC_LABELED_RE = /^(\S+)\s+~(.+)~>\s+(\S+)$/;
+
+const ARROW_CHARS = ['->', '~>', '<->', '<~>'];
+
+/**
+ * Try to parse a labeled arrow from a trimmed line.
+ *
+ * Returns:
+ *  - `ParsedArrow` if matched and valid
+ *  - `{ error: string }` if matched but label contains arrow chars
+ *  - `null` if not a labeled arrow (caller should fall through to plain patterns)
+ */
+export function parseArrow(
+  line: string,
+): ParsedArrow | { error: string } | null {
+  // Order: bidi first (longer prefix), then unidirectional
+  const patterns: {
+    re: RegExp;
+    async: boolean;
+    bidirectional: boolean;
+  }[] = [
+    { re: BIDI_SYNC_LABELED_RE, async: false, bidirectional: true },
+    { re: BIDI_ASYNC_LABELED_RE, async: true, bidirectional: true },
+    { re: SYNC_LABELED_RE, async: false, bidirectional: false },
+    { re: ASYNC_LABELED_RE, async: true, bidirectional: false },
+  ];
+
+  for (const { re, async: isAsync, bidirectional } of patterns) {
+    const m = line.match(re);
+    if (!m) continue;
+
+    const label = m[2].trim();
+
+    // Empty label (e.g. `--> B`) — fall through to plain arrow handling
+    if (!label) return null;
+
+    // Validate: no arrow chars inside label
+    for (const arrow of ARROW_CHARS) {
+      if (label.includes(arrow)) {
+        return {
+          error: 'Arrow characters (->, ~>) are not allowed inside labels',
+        };
+      }
+    }
+
+    return {
+      from: m[1],
+      to: m[3],
+      label,
+      async: isAsync,
+      bidirectional,
+    };
+  }
+
+  return null;
+}