@diagrammo/dgmo 0.2.7 → 0.2.9

package/dist/index.d.cts

@@ -171,6 +171,7 @@ interface ChartDataPoint {
 interface ParsedChart {
     type: ChartType;
     title?: string;
+    titleLineNumber?: number;
     series?: string;
     xlabel?: string;
     ylabel?: string;
@@ -235,6 +236,7 @@ interface ParsedHeatmapRow {
 interface ParsedEChart {
     type: EChartsChartType;
     title?: string;
+    titleLineNumber?: number;
     series?: string;
     seriesNames?: string[];
     seriesNameColors?: (string | undefined)[];
@@ -384,6 +386,7 @@ interface D3ExportDimensions {
 interface ParsedD3 {
     type: D3ChartType | null;
     title: string | null;
+    titleLineNumber: number | null;
     orientation: 'horizontal' | 'vertical';
     periods: string[];
     data: D3DataItem[];
@@ -546,6 +549,7 @@ interface SequenceNote {
     position: 'right' | 'left';
     participantId: string;
     lineNumber: number;
+    endLineNumber: number;
 }
 type SequenceElement = SequenceMessage | SequenceBlock | SequenceSection | SequenceNote;
 declare function isSequenceBlock(el: SequenceElement): el is SequenceBlock;
@@ -564,6 +568,7 @@ interface SequenceGroup {
  */
 interface ParsedSequenceDgmo {
     title: string | null;
+    titleLineNumber: number | null;
     participants: SequenceParticipant[];
     messages: SequenceMessage[];
     elements: SequenceElement[];
@@ -660,6 +665,7 @@ interface GraphGroup {
 interface ParsedGraph {
     type: 'flowchart';
     title?: string;
+    titleLineNumber?: number;
     direction: GraphDirection;
     nodes: GraphNode[];
     edges: GraphEdge[];

package/dist/index.d.ts

@@ -171,6 +171,7 @@ interface ChartDataPoint {
 interface ParsedChart {
     type: ChartType;
     title?: string;
+    titleLineNumber?: number;
     series?: string;
     xlabel?: string;
     ylabel?: string;
@@ -235,6 +236,7 @@ interface ParsedHeatmapRow {
 interface ParsedEChart {
     type: EChartsChartType;
     title?: string;
+    titleLineNumber?: number;
     series?: string;
     seriesNames?: string[];
     seriesNameColors?: (string | undefined)[];
@@ -384,6 +386,7 @@ interface D3ExportDimensions {
 interface ParsedD3 {
     type: D3ChartType | null;
     title: string | null;
+    titleLineNumber: number | null;
     orientation: 'horizontal' | 'vertical';
     periods: string[];
     data: D3DataItem[];
@@ -546,6 +549,7 @@ interface SequenceNote {
     position: 'right' | 'left';
     participantId: string;
     lineNumber: number;
+    endLineNumber: number;
 }
 type SequenceElement = SequenceMessage | SequenceBlock | SequenceSection | SequenceNote;
 declare function isSequenceBlock(el: SequenceElement): el is SequenceBlock;
@@ -564,6 +568,7 @@ interface SequenceGroup {
  */
 interface ParsedSequenceDgmo {
     title: string | null;
+    titleLineNumber: number | null;
     participants: SequenceParticipant[];
     messages: SequenceMessage[];
     elements: SequenceElement[];
@@ -660,6 +665,7 @@ interface GraphGroup {
 interface ParsedGraph {
     type: 'flowchart';
     title?: string;
+    titleLineNumber?: number;
     direction: GraphDirection;
     nodes: GraphNode[];
     edges: GraphEdge[];

package/dist/index.js

@@ -196,6 +196,7 @@ function measureIndent(line3) {
 function parseSequenceDgmo(content) {
   const result = {
     title: null,
+    titleLineNumber: null,
     participants: [],
     messages: [],
     elements: [],
@@ -299,6 +300,7 @@ function parseSequenceDgmo(content) {
         }
         if (key === "title") {
           result.title = value;
+          result.titleLineNumber = lineNumber;
           continue;
         }
         result.options[key] = value;
@@ -528,22 +530,19 @@ function parseSequenceDgmo(content) {
       const notePosition = noteSingleMatch[1]?.toLowerCase() || "right";
       let noteParticipant = noteSingleMatch[2] || null;
       if (!noteParticipant) {
-        if (!lastMsgFrom) {
-          result.error = `Line ${lineNumber}: note requires a preceding message`;
-          return result;
-        }
+        if (!lastMsgFrom) continue;
         noteParticipant = lastMsgFrom;
       }
       if (!result.participants.some((p) => p.id === noteParticipant)) {
-        result.error = `Line ${lineNumber}: note references unknown participant '${noteParticipant}'`;
-        return result;
+        continue;
       }
       const note = {
         kind: "note",
         text: noteSingleMatch[3].trim(),
         position: notePosition,
         participantId: noteParticipant,
-        lineNumber
+        lineNumber,
+        endLineNumber: lineNumber
       };
       currentContainer().push(note);
       continue;
@@ -553,15 +552,11 @@ function parseSequenceDgmo(content) {
       const notePosition = noteMultiMatch[1]?.toLowerCase() || "right";
       let noteParticipant = noteMultiMatch[2] || null;
       if (!noteParticipant) {
-        if (!lastMsgFrom) {
-          result.error = `Line ${lineNumber}: note requires a preceding message`;
-          return result;
-        }
+        if (!lastMsgFrom) continue;
         noteParticipant = lastMsgFrom;
       }
       if (!result.participants.some((p) => p.id === noteParticipant)) {
-        result.error = `Line ${lineNumber}: note references unknown participant '${noteParticipant}'`;
-        return result;
+        continue;
       }
       const noteLines = [];
       while (i + 1 < lines.length) {
@@ -573,16 +568,15 @@ function parseSequenceDgmo(content) {
         noteLines.push(nextTrimmed);
         i++;
       }
-      if (noteLines.length === 0) {
-        result.error = `Line ${lineNumber}: multi-line note has no content \u2014 add indented lines or use 'note: text'`;
-        return result;
-      }
+      if (noteLines.length === 0) continue;
       const note = {
         kind: "note",
         text: noteLines.join("\n"),
         position: notePosition,
         participantId: noteParticipant,
-        lineNumber
+        lineNumber,
+        endLineNumber: i + 1
+        // i has advanced past the body lines (1-based)
       };
       currentContainer().push(note);
       continue;
@@ -630,7 +624,7 @@ var init_parser = __esm({
     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*$/i;
+    NOTE_MULTI = /^note(?:\s+(right|left)\s+of\s+([^\s:]+))?\s*:?\s*$/i;
   }
 });
 
@@ -975,6 +969,7 @@ function parseFlowchart(content, palette) {
       }
       if (key === "title") {
         result.title = value;
+        result.titleLineNumber = lineNumber;
         continue;
       }
       if (key === "direction") {
@@ -2413,7 +2408,7 @@ function renderFlowchart(container, graph, layout, palette, isDark, onClickItem,
   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 svg = d3Selection.select(container).append("svg").attr("width", width).attr("height", height).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();
@@ -2426,7 +2421,17 @@ function renderFlowchart(container, graph, layout, palette, isDark, onClickItem,
   }
   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 titleEl = 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 chart-title").style("cursor", onClickItem && graph.titleLineNumber ? "pointer" : "default").text(graph.title);
+    if (graph.titleLineNumber) {
+      titleEl.attr("data-line-number", graph.titleLineNumber);
+      if (onClickItem) {
+        titleEl.on("click", () => onClickItem(graph.titleLineNumber)).on("mouseenter", function() {
+          d3Selection.select(this).attr("opacity", 0.7);
+        }).on("mouseleave", function() {
+          d3Selection.select(this).attr("opacity", 1);
+        });
+      }
+    }
   }
   const contentG = mainG.append("g").attr("transform", `translate(0, ${titleOffset})`);
   for (const group of layout.groups) {
@@ -2460,7 +2465,7 @@ function renderFlowchart(container, graph, layout, palette, isDark, onClickItem,
     }
   }
   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));
+    const nodeG = contentG.append("g").attr("transform", `translate(${node.x}, ${node.y})`).attr("class", "fc-node").attr("data-line-number", String(node.lineNumber)).attr("data-node-id", node.id);
     if (onClickItem) {
       nodeG.style("cursor", "pointer").on("click", () => {
         onClickItem(node.lineNumber);
@@ -2543,14 +2548,16 @@ __export(renderer_exports, {
 import * as d3Selection2 from "d3-selection";
 function parseInlineMarkdown(text) {
   const spans = [];
-  const regex = /\*\*(.+?)\*\*|\*(.+?)\*|`(.+?)`|\[(.+?)\]\((.+?)\)|([^*`[]+)/g;
+  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], italic: true });
-    else if (match[3]) spans.push({ text: match[3], code: true });
-    else if (match[4]) spans.push({ text: match[4], href: match[5] });
-    else if (match[6]) spans.push({ text: match[6] });
+    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;
 }
@@ -2949,6 +2956,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 = [];
   {
@@ -3121,7 +3156,10 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
     `0,0 ${ARROWHEAD_SIZE},${ARROWHEAD_SIZE / 2} 0,${ARROWHEAD_SIZE}`
   ).attr("fill", "none").attr("stroke", palette.text).attr("stroke-width", 1.2);
   if (title) {
-    svg.append("text").attr("x", svgWidth / 2).attr("y", 30).attr("text-anchor", "middle").attr("fill", palette.text).attr("font-size", 20).attr("font-weight", "bold").text(title);
+    const titleEl = svg.append("text").attr("class", "chart-title").attr("x", svgWidth / 2).attr("y", 30).attr("text-anchor", "middle").attr("fill", palette.text).attr("font-size", 20).attr("font-weight", "bold").text(title);
+    if (parsed.titleLineNumber) {
+      titleEl.attr("data-line-number", parsed.titleLineNumber);
+    }
   }
   for (const group of groups) {
     if (group.participantIds.length === 0) continue;
@@ -3460,8 +3498,8 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
         );
         const isRight = el.position === "right";
         const noteX = isRight ? px + ACTIVATION_WIDTH + NOTE_GAP : px - ACTIVATION_WIDTH - NOTE_GAP - noteW;
-        const noteTopY = noteY - noteH / 2;
-        const noteG = svg.append("g").attr("class", "note").attr("data-note-toggle", "").attr("data-line-number", String(el.lineNumber));
+        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",
           [
@@ -3481,13 +3519,16 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
             `L ${noteX + noteW} ${noteTopY + NOTE_FOLD}`
           ].join(" ")
         ).attr("fill", "none").attr("stroke", palette.textMuted).attr("stroke-width", 0.75).attr("class", "note-fold");
-        const connectorNoteX = isRight ? noteX : noteX + noteW;
-        const connectorLifeX = isRight ? px + ACTIVATION_WIDTH / 2 : px - ACTIVATION_WIDTH / 2;
-        noteG.append("line").attr("x1", connectorNoteX).attr("y1", noteY).attr("x2", connectorLifeX).attr("y2", noteY).attr("stroke", palette.textMuted).attr("stroke-width", 0.75).attr("stroke-dasharray", "3 2").attr("class", "note-connector");
         wrappedLines.forEach((line3, li) => {
           const textY = noteTopY + NOTE_PAD_V + (li + 1) * NOTE_LINE_H - 3;
-          const textEl = noteG.append("text").attr("x", noteX + NOTE_PAD_H).attr("y", textY).attr("fill", palette.text).attr("font-size", NOTE_FONT_SIZE).attr("class", "note-text");
-          const spans = parseInlineMarkdown(line3);
+          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);
@@ -3637,6 +3678,7 @@ function parseChart(content, palette) {
     }
     if (key === "title") {
       result.title = value;
+      result.titleLineNumber = lineNumber;
       continue;
     }
     if (key === "xlabel") {
@@ -3778,6 +3820,7 @@ function parseEChart(content, palette) {
     }
     if (key === "title") {
       result.title = value;
+      result.titleLineNumber = lineNumber;
       continue;
     }
     if (key === "series") {
@@ -5139,6 +5182,7 @@ function parseD3(content, palette) {
   const result = {
     type: null,
     title: null,
+    titleLineNumber: null,
     orientation: "horizontal",
     periods: [],
     data: [],
@@ -5400,6 +5444,7 @@ function parseD3(content, palette) {
       }
       if (key === "title") {
         result.title = line3.substring(colonIndex + 1).trim();
+        result.titleLineNumber = lineNumber;
         if (result.type === "quadrant") {
           result.quadrantTitleLineNumber = lineNumber;
         }
@@ -5762,7 +5807,17 @@ function renderSlopeChart(container, parsed, palette, isDark, onClickItem, expor
   const g = svg.append("g").attr("transform", `translate(${SLOPE_MARGIN.left},${SLOPE_MARGIN.top})`);
   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);
+    const titleEl = svg.append("text").attr("class", "chart-title").attr("x", width / 2).attr("y", 30).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", "20px").attr("font-weight", "700").style("cursor", onClickItem && parsed.titleLineNumber ? "pointer" : "default").text(title);
+    if (parsed.titleLineNumber) {
+      titleEl.attr("data-line-number", parsed.titleLineNumber);
+      if (onClickItem) {
+        titleEl.on("click", () => onClickItem(parsed.titleLineNumber)).on("mouseenter", function() {
+          d3Selection3.select(this).attr("opacity", 0.7);
+        }).on("mouseleave", function() {
+          d3Selection3.select(this).attr("opacity", 1);
+        });
+      }
+    }
   }
   for (const period of periods) {
     const x = xScale(period);
@@ -5971,7 +6026,17 @@ function renderArcDiagram(container, parsed, palette, _isDark, onClickItem, expo
   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);
+    const titleEl = svg.append("text").attr("class", "chart-title").attr("x", width / 2).attr("y", 30).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", "20px").attr("font-weight", "700").style("cursor", onClickItem && parsed.titleLineNumber ? "pointer" : "default").text(title);
+    if (parsed.titleLineNumber) {
+      titleEl.attr("data-line-number", parsed.titleLineNumber);
+      if (onClickItem) {
+        titleEl.on("click", () => onClickItem(parsed.titleLineNumber)).on("mouseenter", function() {
+          d3Selection3.select(this).attr("opacity", 0.7);
+        }).on("mouseleave", function() {
+          d3Selection3.select(this).attr("opacity", 1);
+        });
+      }
+    }
   }
   const neighbors = /* @__PURE__ */ new Map();
   for (const node of nodes) neighbors.set(node, /* @__PURE__ */ new Set());
@@ -6523,7 +6588,17 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
       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);
+        const titleEl = svg.append("text").attr("class", "chart-title").attr("x", width / 2).attr("y", 30).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", "20px").attr("font-weight", "700").style("cursor", onClickItem && parsed.titleLineNumber ? "pointer" : "default").text(title);
+        if (parsed.titleLineNumber) {
+          titleEl.attr("data-line-number", parsed.titleLineNumber);
+          if (onClickItem) {
+            titleEl.on("click", () => onClickItem(parsed.titleLineNumber)).on("mouseenter", function() {
+              d3Selection3.select(this).attr("opacity", 0.7);
+            }).on("mouseleave", function() {
+              d3Selection3.select(this).attr("opacity", 1);
+            });
+          }
+        }
       }
       renderEras(
         g,
@@ -6617,7 +6692,17 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
       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);
+        const titleEl = svg.append("text").attr("class", "chart-title").attr("x", width / 2).attr("y", 30).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", "20px").attr("font-weight", "700").style("cursor", onClickItem && parsed.titleLineNumber ? "pointer" : "default").text(title);
+        if (parsed.titleLineNumber) {
+          titleEl.attr("data-line-number", parsed.titleLineNumber);
+          if (onClickItem) {
+            titleEl.on("click", () => onClickItem(parsed.titleLineNumber)).on("mouseenter", function() {
+              d3Selection3.select(this).attr("opacity", 0.7);
+            }).on("mouseleave", function() {
+              d3Selection3.select(this).attr("opacity", 1);
+            });
+          }
+        }
       }
       renderEras(
         g,
@@ -6740,7 +6825,17 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
     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);
+      const titleEl = svg.append("text").attr("class", "chart-title").attr("x", width / 2).attr("y", 30).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", "20px").attr("font-weight", "700").style("cursor", onClickItem && parsed.titleLineNumber ? "pointer" : "default").text(title);
+      if (parsed.titleLineNumber) {
+        titleEl.attr("data-line-number", parsed.titleLineNumber);
+        if (onClickItem) {
+          titleEl.on("click", () => onClickItem(parsed.titleLineNumber)).on("mouseenter", function() {
+            d3Selection3.select(this).attr("opacity", 0.7);
+          }).on("mouseleave", function() {
+            d3Selection3.select(this).attr("opacity", 1);
+          });
+        }
+      }
     }
     renderEras(
       g,
@@ -6885,7 +6980,17 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
     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);
+      const titleEl = svg.append("text").attr("class", "chart-title").attr("x", width / 2).attr("y", 30).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", "20px").attr("font-weight", "700").style("cursor", onClickItem && parsed.titleLineNumber ? "pointer" : "default").text(title);
+      if (parsed.titleLineNumber) {
+        titleEl.attr("data-line-number", parsed.titleLineNumber);
+        if (onClickItem) {
+          titleEl.on("click", () => onClickItem(parsed.titleLineNumber)).on("mouseenter", function() {
+            d3Selection3.select(this).attr("opacity", 0.7);
+          }).on("mouseleave", function() {
+            d3Selection3.select(this).attr("opacity", 1);
+          });
+        }
+      }
     }
     renderEras(
       g,
@@ -7036,7 +7141,17 @@ function renderWordCloud(container, parsed, palette, _isDark, onClickItem, expor
   const rotateFn = getRotateFn(cloudOptions.rotate);
   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);
+    const titleEl = svg.append("text").attr("class", "chart-title").attr("x", width / 2).attr("y", 30).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", "20px").attr("font-weight", "700").style("cursor", onClickItem && parsed.titleLineNumber ? "pointer" : "default").text(title);
+    if (parsed.titleLineNumber) {
+      titleEl.attr("data-line-number", parsed.titleLineNumber);
+      if (onClickItem) {
+        titleEl.on("click", () => onClickItem(parsed.titleLineNumber)).on("mouseenter", function() {
+          d3Selection3.select(this).attr("opacity", 0.7);
+        }).on("mouseleave", function() {
+          d3Selection3.select(this).attr("opacity", 1);
+        });
+      }
+    }
   }
   const g = svg.append("g").attr(
     "transform",
@@ -7086,7 +7201,10 @@ function renderWordCloudAsync(container, parsed, palette, _isDark, exportDims) {
     const rotateFn = getRotateFn(cloudOptions.rotate);
     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);
+      const titleEl = svg.append("text").attr("class", "chart-title").attr("x", width / 2).attr("y", 30).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", "20px").attr("font-weight", "700").text(title);
+      if (parsed.titleLineNumber) {
+        titleEl.attr("data-line-number", parsed.titleLineNumber);
+      }
     }
     const g = svg.append("g").attr(
       "transform",
@@ -7296,7 +7414,17 @@ function renderVenn(container, parsed, palette, isDark, onClickItem, exportDims)
   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);
+    const titleEl = svg.append("text").attr("class", "chart-title").attr("x", width / 2).attr("y", 30).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", "20px").attr("font-weight", "700").style("cursor", onClickItem && parsed.titleLineNumber ? "pointer" : "default").text(title);
+    if (parsed.titleLineNumber) {
+      titleEl.attr("data-line-number", parsed.titleLineNumber);
+      if (onClickItem) {
+        titleEl.on("click", () => onClickItem(parsed.titleLineNumber)).on("mouseenter", function() {
+          d3Selection3.select(this).attr("opacity", 0.7);
+        }).on("mouseleave", function() {
+          d3Selection3.select(this).attr("opacity", 1);
+        });
+      }
+    }
   }
   const defs = svg.append("defs");
   const pad = 20;
@@ -7474,10 +7602,13 @@ function renderQuadrant(container, parsed, palette, isDark, onClickItem, exportD
   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(
+    const titleText = svg.append("text").attr("class", "chart-title").attr("x", width / 2).attr("y", 30).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", "20px").attr("font-weight", "700").style(
       "cursor",
       onClickItem && quadrantTitleLineNumber ? "pointer" : "default"
     ).text(title);
+    if (quadrantTitleLineNumber) {
+      titleText.attr("data-line-number", quadrantTitleLineNumber);
+    }
     if (onClickItem && quadrantTitleLineNumber) {
       titleText.on("click", () => onClickItem(quadrantTitleLineNumber)).on("mouseenter", function() {
         d3Selection3.select(this).attr("opacity", 0.7);