/** 本套件實際用到的 mermaid API 子集 — 避免直接相依 mermaid 匯出的型別。 */ interface MermaidRenderResult { svg: string; bindFunctions?: (element: Element) => void; } interface MermaidLike { initialize: (config: unknown) => void; render: (id: string, text: string, container?: Element) => Promise; parse?: (text: string) => Promise | unknown; } /** 如何取得外部 mermaid:注入實例 > peer 動態 import('mermaid') > CDN。 */ interface MermaidSource { /** (a) host 已 import 的 mermaid 實例,最高優先,不再動態載入。 */ instance?: MermaidLike; /** (c) mermaid ESM build 的 CDN 網址,如 .../mermaid@11/dist/mermaid.esm.min.mjs。 */ cdnUrl?: string; } interface LoadMermaidOptions { source?: MermaidSource; /** 強制重新解析(清掉模組級快取)。 */ fresh?: boolean; } /** svg-pan-zoom 工廠函式(預設匯出),只列出本套件用到的形狀。 */ type SvgPanZoomFactory = (svg: SVGElement, options?: Record) => PanZoomInstance; interface SvgPanZoomSource { instance?: SvgPanZoomFactory; cdnUrl?: string; } /** svg-pan-zoom 實例 — 只列出本套件用到的方法。 */ interface PanZoomInstance { destroy: () => void; zoomBy: (factor: number) => void; zoom: (scale: number) => void; /** 以指定點為錨點縮放(乘以 factor);手勢捏合縮放用,讓兩指中點維持在原位。 */ zoomAtPointBy: (factor: number, point: { x: number; y: number; }) => void; getZoom: () => number; resize: () => void; fit: () => void; center: () => void; pan: (point: { x: number; y: number; }) => void; /** 相對平移(螢幕像素位移);手勢拖曳用。 */ panBy: (point: { x: number; y: number; }) => void; getPan: () => { x: number; y: number; }; getSizes: () => { width: number; height: number; realZoom: number; viewBox: { x: number; y: number; width: number; height: number; }; }; } type MermaidTheme = 'colorful' | 'sketch' | 'auto' | 'default' | 'dark' | 'neutral' | 'forest'; type MermaidBaseTheme = 'default' | 'dark' | 'neutral' | 'forest'; /** 畫布疊加圖樣:無 / 網點 / 網格線。可與任一底色(透明或純色)自由組合。 */ type RsmPattern = 'none' | 'dots' | 'grid'; /** 一個底色預設色票;`value` 為 null 代表「預設 / 透明」(跟隨頁面底色)。 */ interface RsmBackgroundPreset { /** 色票 hex(如 `#FFFFFF`);null = 透明 / 跟隨頁面。 */ value: string | null; /** 顯示名稱(tooltip / aria-label)。 */ label: string; } interface RenderDiagramOptions { /** mermaid 原始碼字串。 */ code: string; /** 渲染目標;字串視為 CSS selector。省略則只回傳 detached SVG。 */ container?: HTMLElement | string; theme?: MermaidTheme; dark?: boolean; /** sketch 抖動亂數種子,預設 42。 */ seed?: number; /** sketch 手寫字體來源覆寫。 */ fontUrl?: string; /** 透傳給 mermaid.initialize 的設定(深合併)。 */ mermaidConfig?: Record; /** 如何取得 mermaid。 */ mermaid?: MermaidSource; /** 是否注入套件內建 CSS,預設 true。 */ injectStyles?: boolean; } interface RenderResult { /** 已注入 container(若有提供)的 SVG 元素。 */ svg: SVGSVGElement; /** 序列化後的 SVG 字串。 */ svgString: string; /** 本次 render 使用的唯一 id。 */ id: string; } type RasterType = 'png' | 'jpeg' | 'webp'; interface ExportRasterOptions { /** 解析度倍率,預設 2。 */ scale?: 1 | 2 | 4; /** 透明背景(JPEG 不支援,會自動填白)。 */ transparent?: boolean; /** 明確指定背景色,覆寫 transparent。 */ background?: string; type?: RasterType; /** jpeg / webp 的品質 0..1,預設 0.92。 */ quality?: number; } interface SearchState { current: number; total: number; } /** 檢查點的嚴重度 — 決定角標與卡片的配色。 */ type CheckSeverity = 'info' | 'warn' | 'error'; /** 一段可複製的檢查片段(SQL / KQL / 指令…)。`lang` 同時作為顯示標籤。 */ interface CheckSnippet { /** 語言 / 類型,例 `sql`、`kql`、`sh`。來自指令的鍵名。 */ lang?: string; /** 覆寫顯示標籤;省略時顯示 `lang`。 */ label?: string; code: string; } /** 外部參考連結(Runbook / Jira / Confluence…)。 */ interface CheckLink { label: string; url: string; } /** ELK 查詢條件;`kql` 由套件內建 builder 消費,`dsl` 僅交給 host callback。 */ interface CheckElkQuery { kql?: string; /** 完整 ES DSL — 內建 builder 不處理(含 `-` 的欄位需 custom filter pill),僅供 callback 使用。 */ dsl?: Record; /** 覆寫 index / data view(交給 callback 判斷用)。 */ index?: string; /** 覆寫按鈕文字。 */ label?: string; } /** 掛在某個圖形節點上的一則檢查提示。 */ interface DiagramCheck { /** 對應的節點:預設比對作者 id,`match: 'label'` 時比對節點標籤文字。 */ target: string; match?: 'id' | 'label'; /** 省略時渲染期以節點自身的標籤文字遞補。 */ title?: string; severity?: CheckSeverity; desc?: string; /** 逐步檢查步驟(有序)。 */ steps?: string[]; snippets?: CheckSnippet[]; links?: CheckLink[]; elk?: CheckElkQuery; } /** 掛在某個圖形節點上的一則懸停提示。 */ interface DiagramTip { /** 對應的節點:預設比對作者 id,`match: 'label'` 時比對節點標籤文字。 */ target: string; match?: 'id' | 'label'; /** 懸停時顯示的文字(可多行,`\n` 分行)。 */ text: string; } /** 內建 Kibana Discover 連結設定;host 已知 data view UUID 時可免後端直接產連結。 */ interface ElkLinkConfig { /** Kibana 站台網址,例 `https://kibana.example.com`。 */ kibanaHost: string; /** data view(index pattern)的 UUID。 */ dataViewId: string; /** 時間範圍,支援絕對 ISO 或相對值(`now-24h`)。預設 `now-24h` → `now`。 */ timeFrom?: string; timeTo?: string; /** Discover 預設顯示欄位。 */ columns?: string[]; } type DiagramType = 'flowchart' | 'sequence' | 'class' | 'er' | 'state' | 'mindmap' | 'requirement' | 'quadrant' | 'c4' | 'kanban' | 'sankey' | 'journey' | 'gantt' | 'pie' | 'xychart' | 'architecture' | 'block' | 'packet' | 'gitgraph' | 'timeline' | 'orid'; /** 節點外形 — 先填 flowchart / state 值,後續圖種(class/er/sequence)再擴充。 */ type NodeShape = 'rectangle' | 'rounded' | 'stadium' | 'subroutine' | 'cylinder' | 'circle' | 'doubleCircle' | 'diamond' | 'hexagon' | 'odd' | 'trapezoid' | 'trapezoidAlt' | 'parallelogram' | 'parallelogramAlt' | 'ellipse' | 'state' | 'stateStart' | 'stateEnd' | 'fork' | 'choice' | 'classBox' | 'entity' | 'actor' | 'participant' | 'note' | 'requirementBox' | 'elementBox' | 'point' | 'c4Person' | 'c4Box' | 'c4Db' | 'c4Queue' | 'kanbanCard' | 'sankeyNode' | 'journeyTask' | 'ganttBar' | 'pieSlice' | 'xyPoint' | 'archNode' | 'packetField' | 'gitCommit' | 'passthrough'; /** 線條樣式(對映 flowchart 的 normal / thick / dotted / invisible)。 */ type LineKind = 'solid' | 'dotted' | 'thick' | 'invisible'; /** 箭頭端 — flowchart 用 none/arrow/open/dot/cross;class/er 後續加 variant。 */ type ArrowHead = 'none' | 'arrow' | 'open' | 'dot' | 'cross' | 'triangle' | 'diamond' | 'diamondFilled' | 'crowFootOne' | 'crowFootMany'; interface Point { x: number; y: number; } /** * 連線端的「固定錨點」(draw.io 式)。以相對節點 bbox 的分數座標表示(fx/fy ∈ 0..1), * 對標 draw.io 的 exitX/exitY / entryX/entryY。未設(undefined)= 浮動錨:動態朝對端中心, * 維持原本行為。此為編輯器專屬視覺資訊,mermaid 文字無對應語法(serialize 時略去,如同 waypoints)。 */ interface EdgeAnchor { fx: number; fy: number; } /** 內聯樣式 — 對映 mermaid 的 style / classDef。 */ interface ElementStyle { fill?: string; stroke?: string; strokeWidth?: number; strokeDasharray?: string; color?: string; /** round-trip mermaid 的 `:::className`。 */ classRef?: string; } type LabelKind = 'markdown' | 'string' | 'text'; /** 型別專屬節點資料(判別式聯集)。 */ type NodeData = { kind: 'flowchart'; } | { kind: 'state'; isStart?: boolean; isEnd?: boolean; composite?: boolean; } | { kind: 'sequence'; actor: boolean; } | { kind: 'class'; members: string[]; methods: string[]; stereotype?: string; generic?: string; } | { kind: 'er'; attributes: ErAttribute[]; } | { kind: 'mindmap'; shapeType: number; } | { kind: 'requirement'; req: RequirementData; } | { kind: 'quadrant'; radius?: number; color?: string; strokeColor?: string; strokeWidth?: string; } | { kind: 'c4'; c4Type: string; techn?: string; descr?: string; } | { kind: 'kanban'; assigned?: string; ticket?: string; priority?: string; } | { kind: 'sankey'; } /** 旅程圖任務:心情分數 1..5 與參與角色。 */ | { kind: 'journey'; score: number; actors: string[]; } /** 甘特任務:旗標(done/active/crit/milestone)+ 原始的起訖寫法(保留 after / 工期單位)。 */ | { kind: 'gantt'; flags: string[]; startRaw: string; endRaw: string; afterId?: string; } | { kind: 'pie'; value: number; } /** xychart 資料點:屬於第幾組系列、第幾個類別(值由節點的 y 決定)。 */ | { kind: 'xy'; series: number; index: number; } /** architecture 服務:圖示名(cloud/database/disk/server/internet)與是否為 junction。 */ | { kind: 'architecture'; icon?: string; junction?: boolean; } /** block 積木:占幾個欄位(位置決定它在網格的哪一格)。 */ | { kind: 'block'; span: number; } | { kind: 'packet'; } /** git 提交:type 沿用 mermaid 代碼(0 一般 / 1 REVERSE / 2 HIGHLIGHT / 3 MERGE); * 合併節點另記來源分支(父子關係由指令順序推導,不必存)。 */ | { kind: 'gitgraph'; commitType: number; tags: string[]; mergeFrom?: string; } | { kind: 'note'; text: string; }; /** requirementDiagram 的節點:需求(有 id/text/風險/驗證方式)或元素(有型別/文件連結)。 */ type RequirementData = { element: false; /** mermaid 關鍵字:requirement / functionalRequirement / …(見 REQ_TYPE_KEYWORD)。 */ reqType: ReqType; reqId?: string; text?: string; risk?: ReqRisk; verifyMethod?: ReqVerify; } | { element: true; elementType?: string; docRef?: string; }; type ReqType = 'requirement' | 'functionalRequirement' | 'interfaceRequirement' | 'performanceRequirement' | 'physicalRequirement' | 'designConstraint'; type ReqRisk = 'low' | 'medium' | 'high'; type ReqVerify = 'analysis' | 'inspection' | 'test' | 'demonstration'; /** quadrantChart 的圖表外框資訊(標題 / 兩軸端點文字 / 四個象限名)。點本身是場景節點。 */ interface QuadrantMeta { title?: string; /** x 軸左右端文字(`x-axis 低 --> 高`);只給左端時 mermaid 也接受。 */ xAxis?: { left: string; right?: string; }; yAxis?: { bottom: string; top?: string; }; /** quadrant-1..4 的名稱(1=右上、2=左上、3=左下、4=右下,與 mermaid 一致)。 */ quadrants: [string?, string?, string?, string?]; /** 未模型化的設定行(%%{init}%% 之外的 `classDef` 等)逐字保留。 */ extraLines?: string[]; } /** 甘特圖的圖表層設定。epoch = 第 0 天(UTC 毫秒),座標換算的原點。 */ interface GanttMeta { title?: string; dateFormat?: string; epoch?: number; /** excludes / todayMarker / tickInterval 等 DB 未建模的設定行,逐字保留。 */ settings: string[]; } /** xychart 的圖表層資訊。資料值本身由節點的 y 決定,這裡只留類別與系列的骨架。 */ interface XyChartMeta { title?: string; xTitle?: string; yTitle?: string; yMin: number; yMax: number; categories: string[]; series: Array<{ kind: 'bar' | 'line'; name?: string; values: number[]; }>; } type ReqRelation = 'contains' | 'copies' | 'derives' | 'satisfies' | 'verifies' | 'refines' | 'traces'; interface ErAttribute { name: string; type?: string; keys?: string[]; comment?: string; } interface SceneNode { id: string; shape: NodeShape; /** 作者文字(可能含
/ markdown)。 */ label: string; labelKind?: LabelKind; /** 場景座標(左上角)+ 尺寸,px。 */ x: number; y: number; w: number; h: number; /** subgraph / namespace / composite-state 的父容器 id。 */ parentId?: string | null; data?: NodeData; style?: ElementStyle; /** 使用者手動定位 → 重排版不覆蓋。 */ pinned?: boolean; /** parse 原序,供 serialize 穩定排序。 */ sourceIndex?: number; /** 無法模型化的原始 token(exotic shape `@{...}` 等),serialize 逐字回吐。 */ raw?: string; } type EdgeData = { kind: 'flowchart'; } | { kind: 'state'; } | { kind: 'sequence'; message: 'sync' | 'async' | 'return' | 'create' | 'destroy'; activate?: boolean; order: number; } | { kind: 'class'; relation: 'inheritance' | 'composition' | 'aggregation' | 'association' | 'dependency' | 'realization'; cardinalitySource?: string; cardinalityTarget?: string; } | { kind: 'er'; identifying: boolean; cardStart?: ErCardinality; cardEnd?: ErCardinality; } | { kind: 'requirement'; relation: ReqRelation; } | { kind: 'c4'; relType: string; techn?: string; descr?: string; } /** sankey 的連線帶「流量」;線寬也依它決定。 */ | { kind: 'sankey'; value: number; } /** architecture 連線:兩端接在節點的哪一邊(T/B/L/R)。 */ | { kind: 'architecture'; fromSide: string; toSide: string; }; /** ER 連線端的基數(crow's foot)。 */ type ErCardinality = 'zeroOrOne' | 'onlyOne' | 'zeroOrMore' | 'oneOrMore'; interface SceneEdge { id: string; source: string; target: string; label?: string; labelKind?: LabelKind; lineKind: LineKind; arrowStart: ArrowHead; arrowEnd: ArrowHead; /** 連線秩距(`---->` 的額外破折號數)。預設 1。 */ minLen?: number; /** 使用者拗折的路徑點(Excalidraw 式)。 */ waypoints?: Point[]; /** 來源端固定錨點(draw.io 式)。未設 = 浮動(動態朝目標)。 */ sourceAnchor?: EdgeAnchor; /** 目標端固定錨點(draw.io 式)。未設 = 浮動(動態朝來源)。 */ targetAnchor?: EdgeAnchor; data?: EdgeData; style?: ElementStyle; sourceIndex?: number; } /** subgraph / cluster / namespace / composite-state 容器。 */ interface SceneContainer { id: string; label: string; x: number; y: number; w: number; h: number; parentId?: string | null; childNodeIds: string[]; /** 子容器(巢狀 subgraph)。 */ childContainerIds?: string[]; /** 容器內方向(per-subgraph direction)。 */ direction?: FlowDirection; /** C4 邊界的種類(ENTERPRISE / SYSTEM / CONTAINER / …),決定序列化用哪個關鍵字。 */ c4Type?: string; sourceIndex?: number; } type FlowDirection = 'TB' | 'TD' | 'BT' | 'LR' | 'RL'; /** 型別專屬場景中繼資料。 */ type SceneMeta = { type: 'flowchart'; direction: FlowDirection; } | { type: 'state'; direction?: FlowDirection; } | { type: 'sequence'; autonumber: boolean; } | { type: 'class'; direction?: FlowDirection; } | { type: 'er'; direction?: FlowDirection; } | { type: 'mindmap'; } | { type: 'requirement'; direction?: FlowDirection; } | { type: 'quadrant'; quadrant: QuadrantMeta; } /** c4Type = C4Context / C4Container / C4Component / C4Dynamic / C4Deployment(決定標頭關鍵字)。 */ | { type: 'c4'; c4Type: string; title?: string; } | { type: 'kanban'; } | { type: 'sankey'; } | { type: 'journey'; title?: string; } | { type: 'gantt'; gantt: GanttMeta; } | { type: 'pie'; title?: string; showData: boolean; } | { type: 'xychart'; xy: XyChartMeta; } | { type: 'architecture'; } | { type: 'block'; columns: number; } /** relative = 原始碼用的是 +N 相對寬度而非絕對位元範圍;沿用作者的寫法。 */ | { type: 'packet'; title?: string; relative: boolean; } | { type: 'gitgraph'; } | { type: 'timeline'; } | { type: 'orid'; }; /** round-trip 時 DB 看不到 / 尚未模型化的內容,逐字保留。 */ interface SceneRaw { /** %% 註解(含 %%{init}%%),帶行錨。 */ comments?: string[]; /** classDef / class / style / linkStyle 等樣式行,逐字。 */ styleLines?: string[]; /** click / href 等互動指令行,逐字。 */ clickLines?: string[]; /** parse 失敗時的完整原文(降級用)。 */ fullSource?: string; } /** sequence 圖以「依序的陳述串」建模(時間序,不吃通用 node/edge)。參與者另鏡像成 nodes 供選取。 */ interface SeqParticipant { id: string; label: string; actor: boolean; } type SeqStatement = { kind: 'message'; from: string; to: string; arrow: string; text: string; activate?: '+' | '-'; } | { kind: 'note'; placement: 'left of' | 'right of' | 'over'; actors: string; text: string; } | { kind: 'fragment'; keyword: string; label: string; } | { kind: 'end'; } | { kind: 'activate'; actor: string; } | { kind: 'deactivate'; actor: string; } | { kind: 'raw'; text: string; }; interface SequenceData { autonumber: boolean; participants: SeqParticipant[]; statements: SeqStatement[]; } interface EditorScene { version: 1; diagramType: DiagramType; meta: SceneMeta; nodes: SceneNode[]; edges: SceneEdge[]; containers: SceneContainer[]; /** sequence 專屬資料(diagramType==='sequence' 時)。 */ sequence?: SequenceData; /** 逐字保留的 YAML frontmatter(--- ... ---)。 */ frontmatter?: string; raw?: SceneRaw; layoutOwner: 'user' | 'engine'; } /** 建立一個空的 flowchart 場景。 */ declare function emptyScene(diagramType?: DiagramType): EditorScene; interface LayoutContext { /** 如何取得 mermaid(預設實作渲染抓座標時需要)。 */ mermaid?: MermaidSource; /** 此場景序列化後的 mermaid 文字(adapter 提供;svg-scrape 引擎據此渲染抓座標)。 */ code: string; direction?: FlowDirection; nodeSpacing?: number; rankSpacing?: number; } interface LayoutEngine { /** 回傳每個 node/container 都有 x/y/w/h、每條 edge(可)有 waypoints 的新場景。 */ layout(scene: EditorScene, ctx: LayoutContext): Promise; } interface DiagramCapabilities { type: DiagramType; /** 此圖種支援的節點外形(供工具列 shape 選單)。 */ shapes: NodeShape[]; /** * 工具列直接攤開成按鈕的常用外形(必須是 shapes 的子集)。其餘收進「更多外形」下拉。 * 未指定 = 全部攤開(外形少的圖種如 class / er 就該全部看得到)。 */ quickShapes?: NodeShape[]; arrowHeads: ArrowHead[]; lineKinds: LineKind[]; /** * 這個圖種有沒有「連線」這回事。未指定 = 有。 * * false 代表語法裡根本沒有連線(象限圖 / 看板 / 旅程圖),不只是「這張圖剛好沒畫線」。 * 影響的不只是工具列少一顆按鈕:互動層會整段跳過連線錨點,否則小節點(象限圖的資料點只有 * 26px)會被錨點白點蓋滿,按下去被判成拉線,節點就再也拖不動了。 */ supportsEdges?: boolean; /** 節點可自由拖曳(flowchart=true)?或由引擎排版(sequence=false)? */ freeform: boolean; defaults: { nodeShape: NodeShape; arrowEnd: ArrowHead; }; } interface ParseWarning { message: string; /** 原始碼行號(若可定位)。 */ line?: number; } interface DataLossWarning { message: string; elementId?: string; } interface ParseResult { scene: EditorScene; warnings: ParseWarning[]; } interface SerializeResult { text: string; warnings: DataLossWarning[]; } interface DiagramAdapter { capabilities: DiagramCapabilities; /** 小寫首關鍵字(detectDiagramType 比對用),如 ['flowchart','graph']。 */ keywords: string[]; /** * mermaid 文字 → 場景。需要 DOM(透過 mermaid 解析),故 async + browser-scoped。 * 失敗時應降級並回傳可編輯骨架 + warnings,而非拋例外。 */ parse(text: string, mermaid: MermaidLike): Promise; /** 場景 → mermaid 文字。純函式、同步、必須永遠輸出合法 mermaid。 */ serialize(scene: EditorScene): SerializeResult; /** 為缺座標的場景(匯入)填入 x/y/w/h + edge waypoints。mermaid 供排版引擎渲染抓座標。 */ layout(scene: EditorScene, engine: LayoutEngine, mermaid?: MermaidSource): Promise; } /** 增量重繪提示:哪些 id 變了。structural=true 代表拓樸變動(需重繞邊 / 重建)。 */ interface ScenePatch { nodes?: string[]; edges?: string[]; containers?: string[]; structural?: boolean; } interface CommandResult { scene: EditorScene; patch: ScenePatch; } /** 命令 = 給定場景算出新場景 + patch 的純函式。 */ type Command = (scene: EditorScene) => CommandResult; declare function cmdAddNode(node: SceneNode): Command; declare function cmdAddEdge(edge: SceneEdge): Command; /** 拖線到空白處 → 一步新增「節點 + 連到它的邊」(draw.io 招牌操作),只算一次 undo。 */ declare function cmdAddConnectedNode(node: SceneNode, edge: SceneEdge): Command; /** 一次加入多個節點 + 邊(複製 / 貼上 用),只算一次 undo。 */ declare function cmdAddElements(nodes: SceneNode[], edges: SceneEdge[]): Command; declare function cmdMoveNodes(ids: string[], dx: number, dy: number): Command; declare function cmdResizeNode(id: string, rect: { x: number; y: number; w: number; h: number; }): Command; declare function cmdSetLabel(id: string, label: string): Command; declare function cmdSetShape(id: string, shape: NodeShape): Command; /** 設定節點內聯樣式(底色 / 框線)。 */ declare function cmdSetNodeStyle(id: string, patch: Partial): Command; type AlignAxis = 'left' | 'centerX' | 'right' | 'top' | 'middleY' | 'bottom'; /** 對齊多個選取節點到共同邊/中線。 */ declare function cmdAlignNodes(ids: string[], axis: AlignAxis): Command; declare function cmdReconnectEdge(edgeId: string, endpoint: 'source' | 'target', nodeId: string, anchor?: EdgeAnchor | null): Command; declare function cmdDeleteSelection(nodeIds: string[], edgeIds: string[]): Command; declare function cmdGroup(container: SceneContainer): Command; /** sequence:新增參與者(附加一欄,座標沿用 parse 的欄位佈局 GAP=56)。 */ declare function cmdAddSeqParticipant(): Command; /** sequence:新增一條訊息(預設在前兩個參與者之間)。 */ declare function cmdAddSeqMessage(): Command; /** * sequence:在指定位置插入一則訊息(拖曳繪製用)。 * * 與 cmdAddSeqMessage 的差別在「插在哪」:拖曳是從一條生命線拉到另一條,落點的垂直位置 * 就是使用者想插入的時間點,所以必須能插在中間,而不是一律附加到最後。 * index 以 statements 陣列為準(含 note / loop / alt 等非訊息陳述),超界會夾到合法區間。 */ declare function cmdInsertSeqMessage(from: string, to: string, index: number, arrow?: string, text?: string): Command; /** sequence:新增 note(預設 over 第一位參與者;新增後可直接編輯文字)。 */ declare function cmdAddSeqNote(): Command; /** sequence:刪除參與者(同步移除鏡像 node、相關訊息,並重排剩餘欄位)。 */ declare function cmdDeleteSeqParticipant(id: string): Command; /** sequence:刪除某條陳述(訊息/note 等)。 */ declare function cmdDeleteSeqStatement(index: number): Command; /** * sequence:把某條陳述搬到新的時間位置,並(可選)換到另外兩條生命線之間。 * * to 是「插入點」而非目的索引:與 cmdInsertSeqMessage 一致,指的是搬移前陣列中要插在誰前面。 * 拖的若是 loop/alt/opt 這類片段開頭,單獨搬走會把配對的 end 留在原地、整段縮排爛掉, * 所以連同整個區塊一起搬;反過來抓著 end 拖則不動作 —— 要搬區塊請抓開頭, * 否則使用者一拖就能把 end 丟到自己的開頭前面,產生一份 mermaid 根本不吃的原始碼。 * * retarget 是「跨水道」:一次拖曳同時改了時間位置與收發雙方時,兩件事必須在同一個指令裡完成, * 否則 undo 一次只退一半,使用者得按兩次才回得到原狀。 */ declare function cmdMoveSeqStatement(from: number, to: number, retarget?: { from: string; to: string; }): Command; /** sequence:切換某條訊息的實線/虛線箭頭(->> ↔ -->>)。 */ declare function cmdToggleSeqArrow(index: number): Command; /** sequence:改某條訊息 / note 的文字(scene.sequence.statements[index])。 */ declare function cmdSetSeqMessageText(index: number, text: string): Command; /** sequence:改參與者顯示名(同步更新鏡像 node.label 與 scene.sequence.participants)。 */ declare function cmdRenameSeqParticipant(id: string, label: string): Command; /** * sequence:把參與者移到新的欄位索引(左右換序)。targetIndex 為「移除被拖者後」的插入位置。 * 同步重排 scene.sequence.participants、鏡像 nodes 的陣列順序與欄位 x(沿用 GAP=56 佈局), * 讓渲染 / 命中測試 / serialize 三者一致。serialize 會在順序無法由訊息推斷時補顯式宣告以鎖序。 */ declare function cmdReorderSeqParticipant(id: string, targetIndex: number): Command; /** 新增一個容器(看板 / 旅程圖的欄位;不含任何子節點)。 */ declare function cmdAddContainer(container: SceneContainer): Command; /** 改容器標籤(看板欄名 / 旅程圖 section 名)。 */ declare function cmdSetContainerLabel(id: string, label: string): Command; /** 刪除容器(連同它目前涵蓋的子節點一起,語意上等於「刪掉這一欄」)。 */ declare function cmdDeleteContainer(id: string, childIds: string[]): Command; /** 設定連線的型別專屬資料(需求圖的關係種類 / ER 基數等)。 */ declare function cmdSetEdgeData(edgeId: string, data: EdgeData): Command; /** 設定節點的 label + data(+ 重算尺寸)。供 ER 屬性 / class 成員結構化編輯。 */ declare function cmdSetNodeData(id: string, patch: { label?: string; data?: NodeData; w?: number; h?: number; }): Command; /** 解除群組:移除容器,並清掉其子節點的 parentId(節點本身保留)。 */ declare function cmdUngroup(containerId: string): Command; /** 均分:把 3+ 個選取節點在水平('h')或垂直('v')方向等距分佈(頭尾固定)。 */ declare function cmdDistributeNodes(ids: string[], axis: 'h' | 'v'): Command; declare function cmdSetDirection(direction: 'TB' | 'TD' | 'BT' | 'LR' | 'RL'): Command; /** * 把節點掛到新的父節點底下(或解除,parentId=undefined)。 * * mindmap 沒有連線語法,階層完全由 parentId 決定 → 在心智圖上「拉一條線」語意上就是改父子關係。 * 會擋掉會造成循環的接法(把節點掛到自己的後代之下),否則序列化會無窮遞迴。 */ declare function cmdSetParent(nodeId: string, parentId: string | undefined): Command; declare function cmdAddWaypoint(edgeId: string, waypoints: Point[]): Command; declare function cmdSetLineKind(edgeId: string, lineKind: LineKind): Command; /** 一次設定連線樣式(線型 / 箭頭),供右鍵選單用。 */ declare function cmdSetEdgeStyle(edgeId: string, patch: Partial>): Command; /** 批次設定多條連線的樣式(線型 / 箭頭),只算一次 undo。供工具列「套用到選取連線」。 */ declare function cmdSetEdgesStyle(edgeIds: string[], patch: Partial>): Command; declare class History { private undoStack; private redoStack; /** 套用命令,推入歷史。回傳新場景 + patch。 */ run(scene: EditorScene, command: Command, label: string): CommandResult; /** * 合併到上一筆(相同 label,如連續拖曳):把 after/patch 換掉,before 維持原本。 * 若上一筆 label 不符則退化為一般 run。 */ amend(scene: EditorScene, command: Command, label: string): CommandResult; canUndo(): boolean; canRedo(): boolean; undo(): { scene: EditorScene; patch: ScenePatch; } | null; redo(): { scene: EditorScene; patch: ScenePatch; } | null; clear(): void; } type commands_AlignAxis = AlignAxis; type commands_Command = Command; type commands_CommandResult = CommandResult; type commands_History = History; declare const commands_History: typeof History; type commands_ScenePatch = ScenePatch; declare const commands_cmdAddConnectedNode: typeof cmdAddConnectedNode; declare const commands_cmdAddContainer: typeof cmdAddContainer; declare const commands_cmdAddEdge: typeof cmdAddEdge; declare const commands_cmdAddElements: typeof cmdAddElements; declare const commands_cmdAddNode: typeof cmdAddNode; declare const commands_cmdAddSeqMessage: typeof cmdAddSeqMessage; declare const commands_cmdAddSeqNote: typeof cmdAddSeqNote; declare const commands_cmdAddSeqParticipant: typeof cmdAddSeqParticipant; declare const commands_cmdAddWaypoint: typeof cmdAddWaypoint; declare const commands_cmdAlignNodes: typeof cmdAlignNodes; declare const commands_cmdDeleteContainer: typeof cmdDeleteContainer; declare const commands_cmdDeleteSelection: typeof cmdDeleteSelection; declare const commands_cmdDeleteSeqParticipant: typeof cmdDeleteSeqParticipant; declare const commands_cmdDeleteSeqStatement: typeof cmdDeleteSeqStatement; declare const commands_cmdDistributeNodes: typeof cmdDistributeNodes; declare const commands_cmdGroup: typeof cmdGroup; declare const commands_cmdInsertSeqMessage: typeof cmdInsertSeqMessage; declare const commands_cmdMoveNodes: typeof cmdMoveNodes; declare const commands_cmdMoveSeqStatement: typeof cmdMoveSeqStatement; declare const commands_cmdReconnectEdge: typeof cmdReconnectEdge; declare const commands_cmdRenameSeqParticipant: typeof cmdRenameSeqParticipant; declare const commands_cmdReorderSeqParticipant: typeof cmdReorderSeqParticipant; declare const commands_cmdResizeNode: typeof cmdResizeNode; declare const commands_cmdSetContainerLabel: typeof cmdSetContainerLabel; declare const commands_cmdSetDirection: typeof cmdSetDirection; declare const commands_cmdSetEdgeData: typeof cmdSetEdgeData; declare const commands_cmdSetEdgeStyle: typeof cmdSetEdgeStyle; declare const commands_cmdSetEdgesStyle: typeof cmdSetEdgesStyle; declare const commands_cmdSetLabel: typeof cmdSetLabel; declare const commands_cmdSetLineKind: typeof cmdSetLineKind; declare const commands_cmdSetNodeData: typeof cmdSetNodeData; declare const commands_cmdSetNodeStyle: typeof cmdSetNodeStyle; declare const commands_cmdSetParent: typeof cmdSetParent; declare const commands_cmdSetSeqMessageText: typeof cmdSetSeqMessageText; declare const commands_cmdSetShape: typeof cmdSetShape; declare const commands_cmdToggleSeqArrow: typeof cmdToggleSeqArrow; declare const commands_cmdUngroup: typeof cmdUngroup; declare namespace commands { export { type commands_AlignAxis as AlignAxis, type commands_Command as Command, type commands_CommandResult as CommandResult, commands_History as History, type commands_ScenePatch as ScenePatch, commands_cmdAddConnectedNode as cmdAddConnectedNode, commands_cmdAddContainer as cmdAddContainer, commands_cmdAddEdge as cmdAddEdge, commands_cmdAddElements as cmdAddElements, commands_cmdAddNode as cmdAddNode, commands_cmdAddSeqMessage as cmdAddSeqMessage, commands_cmdAddSeqNote as cmdAddSeqNote, commands_cmdAddSeqParticipant as cmdAddSeqParticipant, commands_cmdAddWaypoint as cmdAddWaypoint, commands_cmdAlignNodes as cmdAlignNodes, commands_cmdDeleteContainer as cmdDeleteContainer, commands_cmdDeleteSelection as cmdDeleteSelection, commands_cmdDeleteSeqParticipant as cmdDeleteSeqParticipant, commands_cmdDeleteSeqStatement as cmdDeleteSeqStatement, commands_cmdDistributeNodes as cmdDistributeNodes, commands_cmdGroup as cmdGroup, commands_cmdInsertSeqMessage as cmdInsertSeqMessage, commands_cmdMoveNodes as cmdMoveNodes, commands_cmdMoveSeqStatement as cmdMoveSeqStatement, commands_cmdReconnectEdge as cmdReconnectEdge, commands_cmdRenameSeqParticipant as cmdRenameSeqParticipant, commands_cmdReorderSeqParticipant as cmdReorderSeqParticipant, commands_cmdResizeNode as cmdResizeNode, commands_cmdSetContainerLabel as cmdSetContainerLabel, commands_cmdSetDirection as cmdSetDirection, commands_cmdSetEdgeData as cmdSetEdgeData, commands_cmdSetEdgeStyle as cmdSetEdgeStyle, commands_cmdSetEdgesStyle as cmdSetEdgesStyle, commands_cmdSetLabel as cmdSetLabel, commands_cmdSetLineKind as cmdSetLineKind, commands_cmdSetNodeData as cmdSetNodeData, commands_cmdSetNodeStyle as cmdSetNodeStyle, commands_cmdSetParent as cmdSetParent, commands_cmdSetSeqMessageText as cmdSetSeqMessageText, commands_cmdSetShape as cmdSetShape, commands_cmdToggleSeqArrow as cmdToggleSeqArrow, commands_cmdUngroup as cmdUngroup }; } /** 'sketch' = Excalidraw 手繪抖動;'clean' = 俐落圓角 + 柔和陰影(貼近 colorful 主題)。 */ type EditorLook = 'sketch' | 'clean'; type Tool = 'select' | 'pan' | 'node-create' | 'edge-create'; type EditorEvent = 'change' | 'mermaidchange' | 'selectionchange' | 'toolchange' | 'historychange' | 'zoomchange' | 'error'; interface DiagramEditorOptions { /** 初始 mermaid 文字(優先於 scene)。 */ source?: string; /** 初始場景(無 source 時使用)。 */ scene?: EditorScene; /** 如何取得 mermaid(parse / layout / 預覽用)。 */ mermaid?: MermaidSource; dark?: boolean; seed?: number; fontUrl?: string; /** 視覺風格:'sketch' 手繪(預設) / 'clean' 俐落圓角+柔和陰影(貼近 colorful)。 */ look?: EditorLook; /** mermaidchange 防抖毫秒,預設 250。 */ debounceMs?: number; } interface DiagramEditorHandle { getScene(): EditorScene; toMermaid(): string; loadSource(text: string): Promise; loadScene(scene: EditorScene): void; setTool(tool: Tool): void; getTool(): Tool; setCreateShape(shape: NodeShape): void; /** 直接在畫布中央放一個節點(可選外形),選取並進入改名。回傳新節點 id。 */ addNode(shape?: NodeShape): string; /** 變更既有節點的外形。 */ setNodeShape(id: string, shape: NodeShape): void; /** 變更 flowchart 方向(TB/LR/…)。 */ setDirection(dir: FlowDirection): void; /** 變更連線樣式(線型 / 箭頭)。 */ setEdgeStyle(edgeId: string, patch: Partial<{ lineKind: LineKind; arrowStart: ArrowHead; arrowEnd: ArrowHead; }>): void; /** 目前圖種的能力(支援的外形 / 線型 / 箭頭),供工具列建構控制項。null = 找不到 adapter。 */ getCapabilities(): DiagramCapabilities | null; /** 「新連線」目前的預設樣式(線型 / 箭頭)。 */ getEdgeStyleDefault(): { lineKind: LineKind; arrowStart: ArrowHead; arrowEnd: ArrowHead; }; /** * 套用連線樣式:更新「新連線」預設,並一併套到目前選取的連線(若有,單一 undo)。 * 會過濾掉目前圖種不支援的線型 / 箭頭,確保永遠序列化成合法 mermaid。 */ applyEdgeStyle(patch: Partial<{ lineKind: LineKind; arrowStart: ArrowHead; arrowEnd: ArrowHead; }>): void; undo(): void; redo(): void; canUndo(): boolean; canRedo(): boolean; selectAll(): void; clearSelection(): void; deleteSelection(): void; getSelection(): string[]; zoomIn(): void; zoomOut(): void; fit(): void; resetView(): void; getZoomPercent(): number; /** 用排版引擎重新整理目前圖的座標(一鍵整版)。 */ tidy(): Promise; /** 複製選取的節點(+其間的邊)並貼上偏移副本。 */ duplicateSelection(): void; /** 把選取的節點群組成一個 subgraph 容器。 */ groupSelection(): void; /** 設定節點底色 + 框線色。 */ setNodeColor(id: string, fill: string, stroke: string): void; /** 對齊多個選取節點。 */ alignSelection(axis: AlignAxis): void; /** 均分:3+ 個選取節點在水平/垂直方向等距分佈。 */ distributeSelection(axis: 'h' | 'v'): void; /** 解除節點所屬的 subgraph 群組(若有)。 */ ungroupNode(nodeId: string): void; /** 新增一位參與者,並直接進入改名。 */ addSeqParticipant(): void; /** 在最後附加一則訊息,並直接進入編輯文字。 */ addSeqMessage(): void; /** 在最後附加一則筆記,並直接進入編輯文字。 */ addSeqNote(): void; /** 切換某則訊息的實線 / 虛線箭頭;省略 index 時作用於目前選取的那則。 */ toggleSeqArrow(index?: number): void; /** 編輯目前選取對象的文字(參與者改名 / 訊息與筆記改內容)。 */ editSelection(): void; setDark(dark: boolean): void; getSvg(): SVGSVGElement; exportSvg(): string; exportPng(opts?: ExportRasterOptions): Promise; downloadSvg(filename?: string): void; downloadPng(filename?: string, opts?: ExportRasterOptions): Promise; /** 把目前圖以 PNG 寫入剪貼簿(對標 draw.io / Excalidraw 的「複製為圖片」)。需安全環境 + 使用者手勢。 */ copyPngToClipboard(opts?: ExportRasterOptions): Promise; /** 顯示 / 隱藏鍵盤快捷鍵說明浮層(? 鍵亦可)。 */ toggleHelp(show?: boolean): void; /** 切換手繪(sketch)/ 簡潔(clean)外觀(致敬 Excalidraw 的手繪風)。 */ setLook(look: EditorLook): void; getLook(): EditorLook; /** 用既有 render-pipeline 在 container 渲染目前場景的「美化預覽」。 */ renderPreview(container: HTMLElement, theme?: MermaidTheme): Promise; on(event: EditorEvent, cb: (payload?: unknown) => void): () => void; destroy(): void; } declare function createDiagramEditor(host: HTMLElement, opts?: DiagramEditorOptions): DiagramEditorHandle; declare function registerAdapter(adapter: DiagramAdapter): void; declare function getAdapter(type: DiagramType): DiagramAdapter | undefined; declare function listAdapters(): DiagramAdapter[]; /** 取第一個有意義關鍵字(略過 frontmatter 與 %% 註解、init 指令)。 */ declare function firstKeyword(text: string): string; /** 由文字偵測圖種;比對已註冊 adapter 的 keywords。 */ declare function detectDiagramType(text: string): DiagramType | undefined; declare const flowchartAdapter: DiagramAdapter; /** 顯式註冊(非 module side-effect,讓只用 flowchart 的 host 不被迫 bundle 其他 adapter)。 */ declare function registerFlowchartAdapter(): void; declare function sceneToFlowchart(scene: EditorScene): SerializeResult; /** * 一次性渲染:載入 mermaid、渲染、後處理並(若有 container)注入頁面。 * 不附 pan/zoom — 適合靜態美化輸出。互動請用 createViewer / 。 */ declare function renderDiagram(opts: RenderDiagramOptions): Promise; declare function loadMermaid(opts?: LoadMermaidOptions): Promise; interface ColorizeOptions { dark?: boolean; } declare function boostLegibility(root: ParentNode): void; /** 在已渲染的 mermaid SVG 上套用 Colorful 樣式(就地修改 DOM)。 */ declare function colorizeDiagram(root: ParentNode, opts?: ColorizeOptions): void; interface PreparedSvg { serialized: string; width: number; height: number; /** 含 (htmlLabels)→ 點陣化可能污染 canvas,呼叫端宜退回 SVG。 */ hasForeignObject: boolean; } /** 解析 mermaid 重繪出來的 SVG 字串(htmlLabels 關閉的 pristine 版),整理成可匯出形式。 */ declare function prepareSvgString(svgText: string): PreparedSvg | undefined; /** 整理一個已存在的 SVG 元素(就地設定尺寸、移除 style 後序列化)。 */ declare function prepareSvgElement(svg: SVGSVGElement): PreparedSvg; /** * 從畫面上 live SVG(已上色、可能被 pan/zoom 包了 viewport transform)複製一份、 * 還原縮放平移後序列化。供同步的 exportSvg() 使用。 */ declare function serializeLiveSvg(svg: SVGSVGElement): PreparedSvg; declare function svgBlob(serialized: string): Blob; /** 把整理好的 SVG 經 Image + canvas 點陣化成 Blob。 */ declare function rasterizeToBlob(prepared: PreparedSvg, opts?: ExportRasterOptions & { dark?: boolean; }): Promise; /** 觸發瀏覽器下載一個 Blob。 */ declare function downloadBlob(blob: Blob, filename: string): void; export { type SceneContainer as $, detectDiagramType as A, downloadBlob as B, type CheckSeverity as C, type DiagramTip as D, type ElkLinkConfig as E, emptyScene as F, loadMermaid as G, prepareSvgElement as H, prepareSvgString as I, rasterizeToBlob as J, registerFlowchartAdapter as K, type LoadMermaidOptions as L, type MermaidTheme as M, type NodeShape as N, renderDiagram as O, type PanZoomInstance as P, sceneToFlowchart as Q, type RsmBackgroundPreset as R, type SvgPanZoomSource as S, type Tool as T, serializeLiveSvg as U, svgBlob as V, type EdgeAnchor as W, type Point as X, type LayoutEngine as Y, type DiagramAdapter as Z, type ParseResult as _, type MermaidBaseTheme as a, type LineKind as a0, type ArrowHead as a1, type NodeData as a2, type ErAttribute as a3, type Command as a4, type DataLossWarning as a5, type DiagramCapabilities as a6, type EdgeData as a7, type EditorEvent as a8, type ElementStyle as a9, type FlowDirection as aa, History as ab, type LabelKind as ac, type LayoutContext as ad, type ParseWarning as ae, type SceneMeta as af, type ScenePatch as ag, type SceneRaw as ah, type SerializeResult as ai, commands as aj, firstKeyword as ak, flowchartAdapter as al, getAdapter as am, listAdapters as an, registerAdapter as ao, type RsmPattern as b, type DiagramCheck as c, type MermaidSource as d, type SearchState as e, type ExportRasterOptions as f, type EditorScene as g, type EditorLook as h, type DiagramEditorHandle as i, type SvgPanZoomFactory as j, type CheckElkQuery as k, type CheckLink as l, type CheckSnippet as m, type ColorizeOptions as n, type DiagramEditorOptions as o, type DiagramType as p, type MermaidLike as q, type PreparedSvg as r, type RasterType as s, type RenderDiagramOptions as t, type RenderResult as u, type SceneEdge as v, type SceneNode as w, boostLegibility as x, colorizeDiagram as y, createDiagramEditor as z };