feat(structure): introduce sequence-interaction structure with hierarchical layout by xxMudCloudxx · Pull Request #204 · antvis/Infographic

xxMudCloudxx · 2026-02-10T11:14:14Z

📝 描述

为了支持时序交互图的层级布局可视化需求，本 PR 引入了全新的 sequence-interaction 结构组件。该组件旨在通过灵活的配置支持多种节点样式、连线风格及布局模式，丰富了现有的图表展示能力。

🛠 改动详情

1. 新增结构组件

核心逻辑实现：创建 src/designs/structures/sequence-interaction.tsx，支持泳道（lifelines）和层级节点布局。
组件注册：在 src/designs/structures/index.ts 中完成组件导出与注册。

2. 模板定义与配置

新增 src/templates/sequence-interaction.ts，提供丰富的预设配置：

节点样式 (Node Styles)：支持 badge-card, compact-card, capsule-item, rounded-rect-node。
连线风格 (Link Styles)：支持默认、虚线 (dashed)、动画 (animated)。
布局间距 (Layout Spacing)：支持默认、紧凑 (compact)、宽松 (wide)。

一共 4(样式) * 3(连线) * 3(布局) = 36个模板

3. 数据支持

在 shared/datasets.ts 和 shared/get-template-data.ts 中添加了相应的示例数据，确保模板能够正常渲染演示内容。

样式

节点样式

有 badge-card、compact-card、capsule-item 和 rounded-rect-node：

连线风格

有默认、dashed、animated：

布局风格

有默认、紧凑、宽松间距

时序错位

DSL

infographic sequence-interaction-compact-animated-badge-card
data
  title TCP三次握手
  desc 客户端与服务器建立可靠连接的过程
  sequences
    - label 客户端
      icon mingcute/computer-line
      children
        - label CLOSED
          id client-closed
          icon mingcute/close-circle-line
          step 0
        - label SYN-SENT
          id client-syn-sent
          icon mingcute/send-line
          step 2
        - label ESTABLISHED
          id client-established
          icon mingcute/check-circle-line
          step 4
    - label 服务器
      icon mingcute/server-line
      children
        - label CLOSED
          id server-closed
          icon mingcute/close-circle-line
          step 0
        - label LISTEN
          id server-listen
          icon mingcute/ear-line
          step 1
        - label SYN-RCVD
          id server-syn-rcvd
          icon mingcute/receive-line
          step 3
        - label ESTABLISHED
          id server-established
          icon mingcute/check-circle-line
          step 4
  relations
    client-closed - SYN=1, seq=x -> server-listen
    server-listen - SYN=1, ACK=1, seq=y, ack=x+1 -> client-syn-sent
    client-syn-sent - ACK=1, seq=x+1, ack=y+1 -> server-syn-rcvd
    client-established - 数据传输 <-> server-established
theme light
  palette antv

未完成的工作

箭头的退避算法

gemini-code-assist · 2026-02-10T11:14:39Z

Summary of Changes

Hello @xxMudCloudxx, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

此 PR 旨在通过引入一个全新的 sequence-interaction 结构组件，显著增强系统对时序交互图层级布局的可视化能力。该组件提供了丰富的配置选项，允许用户自定义节点样式、连线风格和布局间距，从而能够渲染更多样化和复杂的交互流程图。同时，PR 还包含了新的数据模板和示例数据，以便快速展示和验证新功能。

Highlights

引入全新结构组件: 引入了全新的 sequence-interaction 结构组件，支持时序交互图的层级布局可视化需求。
多样化配置选项: 该组件支持灵活配置多种节点样式（如 badge-card, compact-card）、连线风格（实线、虚线、动画）及布局模式（默认、紧凑、宽松）。
新增预设模板: 新增了 36 种预设模板，覆盖了节点样式、连线风格和布局间距的多种组合，极大地丰富了图表展示能力。
示例数据支持: 为 sequence-interaction 组件添加了 TCP 三次握手示例数据，方便功能演示和测试。

Changelog

shared/datasets.ts
- 新增了 TCP_HANDSHAKE 数据集，用于演示时序交互图。
shared/get-template-data.ts
- 更新了数据获取逻辑，使其能够为 sequence-interaction 模板提供 TCP_HANDSHAKE 数据。
src/designs/structures/index.ts
- 导出了新创建的 sequence-interaction 结构组件。
src/designs/structures/sequence-interaction.tsx
- 实现了 SequenceInteractionFlow 组件的核心逻辑，包括泳道、节点、生命线、消息箭头及其动画效果的渲染，并支持多种样式和布局配置。
src/templates/built-in.ts
- 导入并集成了 sequenceInteractionTemplates，使其成为内置模板的一部分。
src/templates/sequence-interaction.ts
- 定义了一系列 sequence-interaction 模板，通过组合不同的节点样式、箭头样式和结构布局，生成了 36 种预设配置。

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	`/gemini review`	Performs a code review for the current pull request in its current state.
Pull Request Summary	`/gemini summary`	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	`/gemini help`	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

gemini-code-assist

Code Review

此次 PR 引入了一个新的 sequence-interaction 结构，这是一个很棒的功能，可以用来可视化带有层级布局的时序图。实现非常全面，涵盖了各种节点样式、线条样式和布局选项。其中，根据标签大小动态调整泳道宽度的功能尤其出色。

我发现了一些可以改进的地方，主要与代码的清晰度和可维护性有关，例如移除未使用的变量、避免硬编码值以及重构重复代码。详细建议请见下方的评论。总的来说，这是一项扎实的工作。

codecov-commenter · 2026-02-10T11:31:09Z

Codecov Report

❌ Patch coverage is 36.33721% with 657 lines in your changes missing coverage. Please review.
✅ Project coverage is 46.05%. Comparing base (d03fde1) to head (763bfca).
⚠️ Report is 1 commits behind head on main.

Files with missing lines	Patch %	Lines
src/designs/structures/sequence-interaction.tsx	5.04%	602 Missing ⚠️
src/designs/utils/geometry.tsx	82.18%	48 Missing and 1 partial ⚠️
src/designs/structures/relation-dagre-flow.tsx	33.33%	4 Missing ⚠️
src/syntax/index.ts	93.10%	2 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #204      +/-   ##
==========================================
+ Coverage   45.95%   46.05%   +0.09%     
==========================================
  Files         338      341       +3     
  Lines       27047    27892     +845     
  Branches     2202     2270      +68     
==========================================
+ Hits        12430    12845     +415     
- Misses      14606    15035     +429     
- Partials       11       12       +1

Flag	Coverage Δ
infographic	`46.05% <36.33%> (+0.09%)`	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Files with missing lines	Coverage Δ
src/designs/structures/index.ts	`100.00% <100.00%> (ø)`
src/designs/utils/index.ts	`100.00% <100.00%> (ø)`
src/syntax/relations.ts	`95.25% <100.00%> (ø)`
src/syntax/schema.ts	`100.00% <100.00%> (ø)`
src/templates/built-in.ts	`100.00% <100.00%> (ø)`
src/templates/sequence-interaction.ts	`100.00% <100.00%> (ø)`
src/types/data.ts	`100.00% <ø> (ø)`
src/utils/measure-text.ts	`83.89% <ø> (+52.54%)`	⬆️
src/syntax/index.ts	`95.29% <93.10%> (-1.55%)`	⬇️
src/designs/structures/relation-dagre-flow.tsx	`3.34% <33.33%> (+0.80%)`	⬆️
... and 2 more

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

xxMudCloudxx · 2026-02-12T12:01:28Z

CR后详细变更日志

1. 新增特性：自定义垂直层级 (Step Ordering)

Commit: feat: support custom vertical step ordering in sequence interactions
实现细节:
- 在 InteractionChildDatum 接口中新增可选属性 step?: number。
- 核心逻辑: 节点的垂直位置 (Y轴) 不再强制绑定数组索引。如果指定了 step，渲染引擎将精准使用该值作为行索引。
- 复杂场景支持: 支持 TCP 三次握手等需要“时序错位”展示的异步交互场景，相同 step 的节点将自动水平对齐。
- 动态画布: 自动根据全局最大 step 计算画布总高度，确保内容完整显示。

2. 代码重构：通用几何工具库抽离 (跨组件优化)

Commit: refactor: extract geometry utilities and optimize arrow rendering
目的: 消除冗余，统一几何计算标准。将原本散落在不同结构组件中的复杂算法标准化。
变动涉及文件: sequence-interaction.tsx, relation-dagre-flow.tsx
核心逻辑抽离: 从上述两个核心结构组件中抽离通用函数，并统一迁至 src/designs/utils/geometry.tsx：

3. 核心优化：连线路径算法迭代

Commit: refacotr: optimize edge path
优化点:
- 双向连接优化: 针对 A↔B 互连场景，引入了偏移计算逻辑，避免往返线条完全重合。
- 智能锚点路由: 算法根据目标节点的象限位置自动选择最优起始锚点（如右上到左下的对角线连接），减少连线与节点的交叉干扰。
- 自连接路径: 优化了自循环路径的渲染，使得指向自身的连线更加规律、美观。

效果

互连，自连：

DSL

infographic sequence-interaction-compact-animated-badge-card
data
  title TCP三次握手
  desc 客户端与服务器建立可靠连接的过程
  sequences
    - label 客户端
      icon mingcute/computer-line
      children
        - label CLOSED
          id client-closed
          icon mingcute/close-circle-line
          step 0
        - label SYN-SENT
          id client-syn-sent
          icon mingcute/send-line
          step 2
        - label ESTABLISHED
          id client-established
          icon mingcute/check-circle-line
          step 4
    - label 服务器
      icon mingcute/server-line
      children
        - label CLOSED
          id server-closed
          icon mingcute/close-circle-line
          step 0
        - label LISTEN
          id server-listen
          icon mingcute/ear-line
          step 1
        - label SYN-RCVD
          id server-syn-rcvd
          icon mingcute/receive-line
          step 3
        - label ESTABLISHED
          id server-established
          icon mingcute/check-circle-line
          step 4
  relations
    client-closed - SYN=1, seq=x -> server-listen
    server-listen - SYN=1, ACK=1, seq=y, ack=x+1 -> client-syn-sent
    client-syn-sent - ACK=1, seq=x+1, ack=y+1 -> server-syn-rcvd
    client-established - 数据传输 <-> server-established
theme light
  palette antv

xxMudCloudxx · 2026-02-12T15:42:43Z

测试没过的原因是，原本的mearsure-text的FONT_EXTEND_FACTOR有时候会刚刚好偏小一点点，导致换行，所以我把1.01改成了1.015，导致了ssr的测试没过，现在我把测试文件更新了。

原来的：

xxMudCloudxx · 2026-02-12T16:03:27Z

commit 32565a1的修改主要集中在 交互流程图的视觉表现 以及 DSL 关系解析算法 的改进，解决了标签遮挡的视觉痛点，并扩展了对复杂连线样式的支持。

1. 交互流程图优化 (Sequence Interaction)

核心变更文件： src/designs/structures/sequence-interaction.tsx

引入 SVG Mask 机制：
- 技术原理：放弃了以往为箭头标签添加背景矩形（Rect）的简单遮挡方案，转而采用 SVG <mask> 元素。通过动态计算标签位置，在连线上方创建一个“镂空”区域。
- 视觉提升：实现了连线在经过标签文字时自然断开的效果。这种方案避免了背景色块与连线、箭头的视觉冲突，在复杂背景下表现更佳。

2. 正则优化

核心变更文件： src/syntax/relations.ts

正则算法优化

通过重构 RELATION_TOKEN 和 ARROW_TOKEN 的正则表达式，精准识别包含 <>、o、.、x、- 以及 >= 等字符组合。现在能够正常识别label了。

代码对比

- const RELATION_TOKEN = /[<>=o.x-]{2,}/;
- const ARROW_TOKEN = /[<>=o.x-]{2,}/g;
+ const RELATION_TOKEN = /(?:[<>o.x-]{2,}|[<>=]{2,})/;
+ const ARROW_TOKEN = /(?:[<>o.x-]{2,}|[<>=]{2,})/g;

逻辑演进

旧正则问题：

使用简单的字符集 [<>=o.x-]。由于包含 =，当 DSL 标签中出现赋值语句（如 SYN=1, seq=x）时，正则引擎会将标签内容误判为箭头符号，导致解析路径错误。
新正则设计 /(?:[<>o.x-]{2,}|[<>=]{2,})/：

采用非捕获分组，将关系符号划分为两个互斥分支：
1. 分支一 [<>o.x-]{2,}：负责 ->、o-、x- 等传统线型。关键是不含 =，彻底避开了标签中赋值符号的干扰。
2. 分支二 [<>=]{2,}：专门负责 =>、<=>、== 等加粗双线样式，要求 = 必须成对或与方向符组合出现。

3. syntax增强

核心变更文件： src/syntax/index.ts

代码背景：

infographic sequence-interaction
data
  # 1. 用户定义了复杂的嵌套结构
  sequences
    - label 客户端
      children
        - id client-closed ...
    - label 服务器
      children
        - id server-listen ...

  # 2. 用户定义了关系
  relations
    client-closed -> server-listen

逻辑对比分析

❌ 修改前 (Before)

处理机制：解析器处理 relations 时，自动提取节点（如 client-closed）并展平，无条件强制写入 data.items。
数据冲突：对象中同时存在 sequences (显式) 和 items (隐式推导)。
后果：

下游 parseData 逻辑优先检查 items。一旦 items 有值则直接返回，导致用户定义的 sequences 被完全忽略，时序图丢失泳道。

✅ 修改后 (After)

处理机制：引入 hasStructuredData 检查机制。
逻辑流：
1. 检测 sequences / lists / compares 是否存在。
2. 若存在，判定 hasStructuredData = true。
3. 跳过向 data.items 写入推导节点的步骤。
结果：data.items 保持为空，下游逻辑强制走 sequences 渲染分支，结构恢复正常。

该修复通过以下逻辑保证了向后兼容性：

场景	逻辑表现	渲染结果
复杂结构 (Sequences)	`hasStructuredData` 为真，不生成 `items`	正确显示泳道与层级
简单流程图 (Relations only)	检测无高级结构，回退至旧逻辑生成 `items`	保持原有自动生成节点的能力

syntax的增强修复了`relation-dagre`的官网示例渲染失败的问题

在site中的relation-dagre示例，由于syntax的错误解析，实际上官网给的示例渲染的结果会有问题：

在我修复后能够正确解析了：

xxMudCloudxx · 2026-02-12T16:04:06Z

/gemini review

gemini-code-assist

Code Review

此 PR 引入了一个全新的 sequence-interaction 结构，用于支持时序交互图的可视化，这是一个非常棒的功能增强。整体实现考虑得很周全，包括了多种节点、连线和布局样式的支持。代码结构清晰，特别是将几何计算相关的工具函数抽离到独立的模块中，并辅以完备的单元测试，值得称赞。

在审查中，我发现 getTangentAngle 工具函数在计算路径起点的切线角度时存在一个错误，这会导致双向箭头的渲染不正确。我在 src/designs/utils/geometry.tsx 及其测试文件中留下了具体的修改建议。修复此问题后，此 PR 将会是一个非常出色的贡献。

xxMudCloudxx · 2026-02-13T08:47:34Z

@Aarebecca 结构组件中 BtnAdd/BtnRemove 的交互逻辑与数据操作指令是否在计划中，我发现80%的结构有BtnsGroup但是被双重隐藏且缺失交互逻辑

Aarebecca · 2026-02-25T02:07:50Z

@Aarebecca 结构组件中 BtnAdd/BtnRemove 的交互逻辑与数据操作指令是否在计划中，我发现80%的结构有BtnsGroup但是被双重隐藏且缺失交互逻辑

BtnAdd/BtnRemove 的交互逻辑是由编辑器统一控制的，各结构只需要按照规范将按钮放置即可

Aarebecca · 2026-02-25T07:12:37Z

@xxMudCloudxx 可以把最典型的 1 ～ 2 个模版加到 skill 中的模版列表中，方便 AI 生成时推荐出来

…ction

… unused code

…measurement logic

…ller

…overlays

xxMudCloudxx · 2026-02-25T10:25:14Z

应该差不多了

gemini-code-assist bot reviewed Feb 10, 2026

View reviewed changes

xxMudCloudxx force-pushed the feat/interaction-flow-hierarchical-layout branch from 59f7f23 to 32565a1 Compare February 12, 2026 15:16

gemini-code-assist bot reviewed Feb 12, 2026

View reviewed changes

xxMudCloudxx changed the title ~~[draft] feat(structure): introduce sequence-interaction structure with hierarchical layout~~ feat(structure): introduce sequence-interaction structure with hierarchical layout Feb 13, 2026

xxMudCloudxx marked this pull request as ready for review February 13, 2026 08:43

Aarebecca reviewed Feb 25, 2026

View reviewed changes

Comment thread __tests__/unit/ssr/output/01-basic-list.svg

Aarebecca approved these changes Feb 25, 2026

View reviewed changes

xxMudCloudxx added 14 commits February 25, 2026 16:37

feat(structure): introduce sequence-interaction structure

15d3232

fix(structure): fix sequence-interaction node icon rendering

859a6d4

feat(structure): enhance interactivity and layout for sequence-intera…

32e39da

…ction

refactor: address CR feedback by refactoring arrow logic and removing…

c56ea6e

… unused code

refacotr: optimize edge path

8281509

refactor: extract geometry utilities and optimize arrow rendering

5f46367

feat: support custom vertical step ordering in sequence interactions

754f160

test: add utils/geometry test

9f1431d

feat: implement edge masking and improve relation syntax parsing

4aea872

fix: regenerate SSR test golden files to align with the updated text …

fa27ced

…measurement logic

fix: remove implicit PI offset in getTangentAngle and handle it in ca…

94981c7

…ller

fix: resolve global ID conflicts in SVG

e1da72e

feat: improve parsing of double-headed arrows in relations

24e9694

feat: add fallback support for items with relations and nested children.

fd82e5e

docs: update sequence-interaction structure description in skills

21730c3

xxMudCloudxx force-pushed the feat/interaction-flow-hierarchical-layout branch from 763bfca to 21730c3 Compare February 25, 2026 09:47

xxMudCloudxx added 3 commits February 25, 2026 17:48

test: update parse-syntax test

bd77618

docs: 精简下模板

2a97219

fix: fix background leakage at rounded corners by adjusting lifeline …

0575416

…overlays

xxMudCloudxx mentioned this pull request Feb 25, 2026

fix(measure-text): apply theme font in compose and lazy-register 851tegakizatsu #210

Merged

Aarebecca approved these changes Feb 26, 2026

View reviewed changes

Aarebecca merged commit 1a3662e into antvis:main Feb 26, 2026
1 check passed

Conversation

xxMudCloudxx commented Feb 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📝 描述

🛠 改动详情

1. 新增结构组件

2. 模板定义与配置

3. 数据支持

样式

节点样式

连线风格

布局风格

时序错位

DSL

未完成的工作

Uh oh!

gemini-code-assist bot commented Feb 10, 2026

Summary of Changes

Highlights

Footnotes

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

codecov-commenter commented Feb 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

xxMudCloudxx commented Feb 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

CR后详细变更日志

1. 新增特性：自定义垂直层级 (Step Ordering)

2. 代码重构：通用几何工具库抽离 (跨组件优化)

3. 核心优化：连线路径算法迭代

效果

DSL

Uh oh!

xxMudCloudxx commented Feb 12, 2026

Uh oh!

xxMudCloudxx commented Feb 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

1. 交互流程图优化 (Sequence Interaction)

2. 正则优化

正则算法优化

代码对比

逻辑演进

3. syntax增强

逻辑对比分析

❌ 修改前 (Before)

✅ 修改后 (After)

syntax的增强修复了relation-dagre的官网示例渲染失败的问题

Uh oh!

xxMudCloudxx commented Feb 12, 2026

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

xxMudCloudxx commented Feb 13, 2026

Uh oh!

Aarebecca commented Feb 25, 2026

Uh oh!

Uh oh!

Aarebecca commented Feb 25, 2026

Uh oh!

xxMudCloudxx commented Feb 25, 2026

Uh oh!

Uh oh!

Reviewers

xxMudCloudxx commented Feb 10, 2026 •

edited

Loading

codecov-commenter commented Feb 10, 2026 •

edited

Loading

xxMudCloudxx commented Feb 12, 2026 •

edited

Loading

xxMudCloudxx commented Feb 12, 2026 •

edited

Loading

syntax的增强修复了`relation-dagre`的官网示例渲染失败的问题