feat(network): tuned node sizing defaults, char-based truncation, review-driven rendering fixes, tests, README/site/gallery updates by Copilot · Pull Request #52 · hustcc/ai-figure

Copilot · 2026-06-04T13:59:40Z

Several UX and quality improvements to the network diagram type, plus README showcase table restructuring and site content updates.

Network rendering changes

Node radius: adjusted from MIN=20/MAX=56 → MIN=16/MAX=56
Default node size: when node weight/value is not specified, node radius now defaults to 36
Weighted size mapping: weighted nodes are clamped to [1,5] and mapped linearly from min→max weighted node to MIN_NODE_R..MAX_NODE_R
Label font size: node labels 14→10, edge labels 12→10
Label truncation: node labels now truncate at 10 characters (…), purely by char count — no width-based secondary clipping
Edge geometry fix: edges now start/end at node boundaries (instead of source center), improving readability
Edge weight support: NetworkEdge.weight now affects rendered edge stroke width
Layout overlap reduction: added radius-aware close-range repulsion and switched to decimal coordinate output to reduce overlap from integer rounding
Group type consistency: ungrouped nodes consistently use the first group type
Parse fix: network parser now updates previously auto-created nodes in place (prevents duplicate nodes when later explicitly declared)

Tests

Added new showcase test cases:
- network-knowledge-mono-purple — ML concepts knowledge graph, mono-purple palette
- network-org-drawio-dark — R&D org chart (Chinese labels), drawio dark palette
Added new regression/unit tests:
- tests/parse/network.test.ts (duplicate-node refinement, ungrouped type behavior, edge weight parsing/rendering behavior)
- tests/network-rendering.test.ts (radius min/max mapping, edge boundary anchoring, ungrouped type assignment, default radius behavior when weight/value is omitted, and label placement assertions)
All network snapshot SVGs regenerated; assets/network.svg synced to the Three Kingdoms characters case

README showcase table

Eliminated the broken row-3 layout (Timeline and Network were stacked/overflowing a 5-column row)
Row 3: Mindmap · Swimlane · Bubble · Radar (4 cells)
Row 4: Timeline · Network (2 cells, each properly separated)

Site & gallery updates

Diagram count: homepage badge, feature card, and all metadata updated from 13 → 14 diagram types
Docs page: added network to the sidebar TOC and a full diagram section with live preview, config table, and markdown syntax notes
Gallery: added 8 diverse network examples to diagrams.ts (matching all other types), covering: Three Kingdoms characters (default), Frontend tech stack (antv), Social network (figma dark), ML knowledge graph (mono-purple), Microservices (drawio), City transport (vega), Movie universe (mono-orange dark), R&D org chart in Chinese (drawio dark)
AI playground system prompt: network added to the valid types list with a working markdown example
SKILL.md: frontmatter description and tags updated to reflect the 14th diagram type (network graph)

…abels

- network.ts: replace fixed BASE_R+WEIGHT_STEP formula with linear mapping from actual [min_weight, max_weight] to [MIN_NODE_R=20, MAX_NODE_R=56]; add edge stroke-width linear mapping from [min_edge_weight, max_edge_weight] to [MIN_EDGE_W=1, MAX_EDGE_W=6] - types.ts: remove [1-5] restriction on NetworkNode.weight; add weight field to NetworkEdge - parse.ts: remove clamp(1,5) on node weight; add edge weight parsing (syntax: `A --> B: label: 3` or `A --> B: 3`) - bubble.ts: replace area-proportional formula with linear radius mapping from actual [minVal, maxVal] to [MIN_R, MAX_R] - Update all affected SVG snapshots

…a, fixed edge width - bubble.ts: revert to original area-proportional radius formula (r = sqrt(MIN_R² + value/maxVal * (MAX_R² − MIN_R²))) - network.ts: replace linear mapping with the same area-proportional formula (weight plays the role of value, maxWeight as denominator) - network.ts: restore fixed theme.edgeWidth for all edges; remove MIN_EDGE_W/MAX_EDGE_W constants and linearMap helper - Update all affected SVG snapshots

…meline and Network

hustcc · 2026-06-04T14:04:46Z

@copilot

官网首页图表数量。
文档页面内容。
gallery 问价和其他图表一样数量的案例，多样性一下。
ai 工具的提示词改一改

…ount

Copilot · 2026-06-04T14:13:08Z

@copilot

官网首页图表数量。...

Done in the latest commit. Changes made:

官网首页图表数量 — homepage badge, feature card, and metadata all updated from 13 → 14 diagram types.
文档页面内容 — docs page now includes a network entry in the sidebar TOC and a full DiagramSection with a live preview, config table, and markdown example.
Gallery 案例 — added 8 diverse network examples to diagrams.ts (matching every other diagram type's count), covering: Three Kingdoms characters (default), Frontend tech stack (antv), Social network (figma dark), ML knowledge graph (mono-purple), Microservices (drawio), City transport (vega), Movie universe (mono-orange dark), R&D org chart in Chinese (drawio dark).
AI 工具提示词 — network added to the valid types list in the AI playground system prompt, plus a working network markdown example section.

Copilot

Pull request overview

This PR introduces and documents a new network diagram type in ai-figure, including a force-directed renderer, figmd parsing support, updated public types/exports, and refreshed docs/site/gallery content to reflect the 14th diagram type.

Changes:

Added network diagram implementation (createNetworkDiagram) and wired it into fig() dispatch + public types.
Added figmd parsing support for figure network, plus multiple new snapshot tests and regenerated SVG snapshots/assets.
Updated README/SKILL/AGENT + site docs/gallery content to include network and reflect “14 diagram types”.

Reviewed changes

Copilot reviewed 19 out of 26 changed files in this pull request and generated 9 comments.

Show a summary per file

File	Description
tests/snapshots/network-tech-stack-antv.svg	New snapshot for antv palette network example
tests/snapshots/network-social-figma-dark.svg	New snapshot for figma dark network example
tests/snapshots/network-parse-characters.svg	New snapshot for figmd-parsed (Chinese) network example
tests/snapshots/network-org-drawio-dark.svg	New snapshot for drawio dark org network example
tests/snapshots/network-knowledge-mono-purple.svg	New snapshot for mono-purple knowledge graph example
tests/snapshots/network-characters-default.svg	New snapshot for default palette Three Kingdoms example
tests/network-tech-stack-antv.test.ts	Adds snapshot test for tech stack network
tests/network-social-figma-dark.test.ts	Adds snapshot test for social graph dark network
tests/network-parse-characters.test.ts	Adds snapshot test exercising figmd parsing for network
tests/network-org-drawio-dark.test.ts	Adds snapshot test for org chart (drawio dark) network
tests/network-knowledge-mono-purple.test.ts	Adds snapshot test for ML knowledge graph network
tests/network-characters-default.test.ts	Adds snapshot test for default palette characters network
src/types.ts	Adds `Network*` public types and extends `FigOptions` union
src/parse.ts	Adds `parseNetwork()` and updates “unknown figure type” error message to include `network`
src/network.ts	New network renderer + force layout implementation
src/index.ts	Wires `network` into dispatcher and re-exports `Network*` types
src/bubble.ts	Minor comment wording change
SKILL.md	Updates skill metadata + adds `network` documentation and examples
site/src/lib/diagrams.ts	Adds `network` examples to gallery data
site/src/app/page.tsx	Updates homepage copy from 13 → 14 diagram types
site/src/app/gallery/page.tsx	Updates gallery page metadata to include network
site/src/app/docs/page.tsx	Adds network section to docs sidebar + content
site/src/app/ai/page.tsx	Updates AI playground system prompt and examples to include network
README.md	Restructures showcase table + adds network docs section and usage snippets
assets/network.svg	Adds representative network SVG asset referenced by README
AGENT.md	Updates contributor guidance to mention network behavior/constants

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

+    if (!nodeMap.has(id) || nodeExpr.trim() !== id) {
+      const node: NetworkNode = { id, label };
+      if (currentGroup) node.group = currentGroup;
+      if (weight !== undefined) node.weight = weight;
+      nodeMap.set(id, node);
+      nodes.push(node);
+    } else if (weight !== undefined) {
+      // Update weight if node was auto-created by an edge
+      const existing = nodeMap.get(id)!;
+      existing.weight = weight;
+    }


+  // ── Compute node radii (area-proportional, same formula as bubble chart) ─
+  // Area ∝ weight: r = sqrt(MIN_R² + weight/maxWeight * (MAX_R² − MIN_R²))
+  const nodeWeights = rawNodes.map(n => Math.max(0, n.weight ?? 1));
+  const maxNodeW = Math.max(...(nodeWeights.length ? nodeWeights : [1]));
+  const radii = nodeWeights.map(w =>
+    maxNodeW > 0
+      ? Math.round(Math.sqrt(MIN_NODE_R * MIN_NODE_R + (w / maxNodeW) * (MAX_NODE_R * MAX_NODE_R - MIN_NODE_R * MIN_NODE_R)))
+      : MIN_NODE_R,
+  );


+  // Collect unique groups in order of first appearance
+  const groupOrder: string[] = [];
+  const groupSeen = new Set<string>();
+  for (const n of rawNodes) {
+    const g = n.group ?? '';
+    if (!groupSeen.has(g)) { groupSeen.add(g); groupOrder.push(g); }
+  }


+    const x1 = px(si), y1 = py(si);
+    const x2 = px(ti), y2 = py(ti);
+    const r2 = radii[ti];
+
+    // Shorten line so it ends at the target node's boundary (arrowhead sits at border)
+    const dx = x2 - x1, dy = y2 - y1;
+    const dist = Math.sqrt(dx * dx + dy * dy) || 1;
+    const ex2 = Math.round(x2 - (dx / dist) * (r2 + 2));
+    const ey2 = Math.round(y2 - (dy / dist) * (r2 + 2));
+
+    parts.push(
+      `<line x1="${x1}" y1="${y1}" x2="${ex2}" y2="${ey2}" ` +
+        `stroke="${escapeXml(theme.edgeColor)}" stroke-width="${theme.edgeWidth}" ` +
+        `marker-end="url(#${uid}-arr)" class="${uid}-edge"/>`,
+    );
+
+    // Optional edge label (centred)
+    if (e.label) {
+      const lx = Math.round((x1 + ex2) / 2);
+      const ly = Math.round((y1 + ey2) / 2);


+        const dx = nodes[i].x - nodes[j].x;
+        const dy = nodes[i].y - nodes[j].y;
+        const d2 = dx * dx + dy * dy || 0.01;
+        const d  = Math.sqrt(d2);
+        const f  = k2 / d;


+    parts.push(
+      `<line x1="${x1}" y1="${y1}" x2="${ex2}" y2="${ey2}" ` +
+        `stroke="${escapeXml(theme.edgeColor)}" stroke-width="${theme.edgeWidth}" ` +
+        `marker-end="url(#${uid}-arr)" class="${uid}-edge"/>`,
+    );


+   * Optional numeric weight (any positive number).
+   * Controls the node circle radius via linear mapping across all node weights:
+   * the node with the lowest weight gets the minimum radius, the highest gets
+   * the maximum radius.  Defaults to 1.
+   */
+  weight?: number;


 - **Sequence**: `TOP_PAD=24`, `BOTTOM_PAD=32`, actor `W=120 H=44`, spacing `180` px center-to-center, message spacing `56` px.
 - **Quadrant**: `PAD_LEFT=56` (Y-axis label), `PAD_RIGHT=24`, `PAD_TOP=32`, `PAD_BOTTOM=52` (X-axis label).
 - **Radar**: `W=560`, `CX=280`, `R=180`, `LABEL_PAD=38`, `LEVELS=5`; legend: `LEGEND_ITEM_H=22`, `LEGEND_PAD_TOP=18`, `LEGEND_PAD_BTOM=14`; max 4 legend columns.
+- **Network**: `BASE_R=28`, `WEIGHT_STEP=6`, `PAD=48`, `IDEAL_LEN=120`, `ITERATIONS=300`; node radius = `BASE_R + (weight−1)×WEIGHT_STEP` (weight clamped to [1,5]).


+import { fig } from '../src/index';
+import { matchSvgSnapshot } from './helpers';
+
+it('network diagram — tech stack dependencies, antv palette', () => {


hustcc · 2026-06-04T14:50:48Z

@copilot code review 的问题帮忙看看～

Copilot · 2026-06-04T14:57:55Z

@copilot code review 的问题帮忙看看～

已处理 code review 提到的问题，修复已在提交 ac7b37f 中。

hustcc · 2026-06-04T15:10:40Z

@copilot 如果图形的直径小于 18，则把文字放在图形外面，做一下简单的文字碰撞处理。

Copilot · 2026-06-04T15:16:48Z

@copilot 如果图形的直径小于 18，则把文字放在图形外面，做一下简单的文字碰撞处理。

已处理，已在提交 222c27f 中实现：当节点直径 < 18 时标签改为外置，并加入了简单的外置标签碰撞避让（按位置逐步下移避免重叠）。同时补充了渲染回归测试并更新了相关 network 快照。

hustcc · 2026-06-04T15:32:27Z

@copilot 为什么节点大小差距这么大了，是修改了最大最小范围吗？

Copilot · 2026-06-04T15:33:35Z

@copilot 为什么节点大小差距这么大了，是修改了最大最小范围吗？

是的，范围改过：当前节点半径从之前的 20~56 调整为 6~32（直径就是 12~64）。另外现在是按当前图里最小/最大权重线性映射到这个范围，所以当权重跨度较大（比如 1 到 5）时，视觉差距会更明显。

hustcc · 2026-06-04T15:37:18Z

@copilot 调整到 16-56 吧，别轻易修改。如果没有指定 value 也默认大小 36

Copilot · 2026-06-04T15:42:28Z

@copilot 调整到 16-56 吧，别轻易修改。如果没有指定 value 也默认大小 36

已按要求调整，提交 cf316e0：节点大小范围改为 16~56，并且未指定 value/weight 时默认节点半径为 36。同时已更新相关测试与 network 快照。

Copilot AI added 10 commits June 4, 2026 05:21

feat: add Network diagram type with lightweight FR layout

6ee35a8

feat(mindmap): smaller nodes, larger spacing, single-line truncated l…

dbdb864

…abels

feat(mindmap): further reduce node size and increase spacing

b286a4a

revert: restore mindmap files to origin/main state

33d988a

fix: reduce network node size to min=6, max=32

de782bb

fix: smaller font for network labels, truncate node labels to 10 chars

642e85d

fix: network node label truncation by char count only, no width clipping

b03f2a8

feat: add 2 network test cases, fix README showcase table rows for Ti…

14e0055

…meline and Network

Copilot AI assigned Copilot and hustcc Jun 4, 2026

Copilot created this pull request from a session on behalf of hustcc June 4, 2026 13:59 View session

Copilot started work on behalf of hustcc June 4, 2026 14:04 View session

feat: add network to gallery, docs, AI prompt; update 13→14 diagram c…

b1c8835

…ount

Copilot AI changed the title ~~feat(network): smaller nodes/labels, char-based truncation, more tests, README table cleanup~~ feat(network): smaller nodes/labels, char-based truncation, more tests, README table cleanup, site & gallery updates Jun 4, 2026

Copilot AI requested a review from hustcc June 4, 2026 14:13

Copilot finished work on behalf of hustcc June 4, 2026 14:13

hustcc requested review from Copilot and removed request for hustcc June 4, 2026 14:41

Copilot started reviewing on behalf of hustcc June 4, 2026 14:41 View session

hustcc marked this pull request as ready for review June 4, 2026 14:41

Copilot AI reviewed Jun 4, 2026

View reviewed changes

Copilot started work on behalf of hustcc June 4, 2026 14:51 View session

fix(network): address review issues in parse/rendering and docs

ac7b37f

Copilot AI changed the title ~~feat(network): smaller nodes/labels, char-based truncation, more tests, README table cleanup, site & gallery updates~~ feat(network): smaller nodes/labels, char-based truncation, review-driven rendering fixes, tests, README/site/gallery updates Jun 4, 2026

Copilot finished work on behalf of hustcc June 4, 2026 14:58

Copilot AI requested a review from hustcc June 4, 2026 14:58

Copilot started work on behalf of hustcc June 4, 2026 15:10 View session

fix(network): move tiny-node labels outside with collision avoidance

222c27f

Copilot finished work on behalf of hustcc June 4, 2026 15:17

Copilot started work on behalf of hustcc June 4, 2026 15:32 View session

Copilot finished work on behalf of hustcc June 4, 2026 15:33

Copilot started work on behalf of hustcc June 4, 2026 15:37 View session

fix(network): restore 16-56 node size range with 36 default

cf316e0

Copilot finished work on behalf of hustcc June 4, 2026 15:43

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(network): tuned node sizing defaults, char-based truncation, review-driven rendering fixes, tests, README/site/gallery updates#52

feat(network): tuned node sizing defaults, char-based truncation, review-driven rendering fixes, tests, README/site/gallery updates#52
hustcc with Copilot wants to merge 14 commits into
mainfrom
copilot/add-network-chart-using-d3-force

Copilot AI commented Jun 4, 2026 •

edited

Loading

Uh oh!

hustcc commented Jun 4, 2026

Uh oh!

Copilot AI commented Jun 4, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

hustcc commented Jun 4, 2026

Uh oh!

Copilot AI commented Jun 4, 2026

Uh oh!

hustcc commented Jun 4, 2026

Uh oh!

Copilot AI commented Jun 4, 2026

Uh oh!

hustcc commented Jun 4, 2026

Uh oh!

Copilot AI commented Jun 4, 2026

Uh oh!

hustcc commented Jun 4, 2026

Uh oh!

Copilot AI commented Jun 4, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

Copilot AI commented Jun 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Network rendering changes

Tests

README showcase table

Site & gallery updates

Uh oh!

hustcc commented Jun 4, 2026

Uh oh!

Copilot AI commented Jun 4, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

hustcc commented Jun 4, 2026

Uh oh!

Copilot AI commented Jun 4, 2026

Uh oh!

hustcc commented Jun 4, 2026

Uh oh!

Copilot AI commented Jun 4, 2026

Uh oh!

hustcc commented Jun 4, 2026

Uh oh!

Copilot AI commented Jun 4, 2026

Uh oh!

hustcc commented Jun 4, 2026

Uh oh!

Copilot AI commented Jun 4, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Copilot AI commented Jun 4, 2026 •

edited

Loading