c4-interactive-html

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

c4-interactive-html

Language: Match the user’s language (中文提问则中文回复).

When this skill applies, the agent MUST analyze the user’s current workspace project (the opened repo), then generate one self-contained HTML file that implements the interactive C4 viewer described below. Do not only describe the HTML—write the file to disk.

语言：匹配用户的使用语言（中文提问则中文回复）。

触发本技能时，Agent 必须分析用户当前的工作区项目（已打开的仓库），然后生成一个独立的HTML文件，实现下文描述的交互式C4查看器。不要仅描述HTML内容，要将文件写入磁盘。

Architectural anchors (from design)

架构锚点（基于设计规范）

L1: The current product/repo is the core system (highlighted, only node that drills to L2).
L2: Containers laid out by layers (interface → application → domain → infrastructure). Only the container that has L3 content shows the drill badge.
L3: Exactly one chosen core container (e.g. main API or main web app) is expanded; others stay at L2 only.
Evidence: Prefer facts from files; in the side panel, state inference basis when uncertain (e.g. “inferred from
```
docker-compose.yml
```
”).

L1：当前产品/仓库是核心系统（高亮显示，是唯一可以下钻到L2的节点）。
L2：容器按层级排布（接口层 → 应用层 → 领域层 → 基础设施层）。仅包含L3内容的容器会显示下钻标识。
L3：仅展开一个选定的核心容器（例如主API或主Web应用），其余容器仅保留在L2层级。
依据：优先使用文件中的事实信息；如果信息不确定，在侧边栏中说明推断依据（例如“从
```
docker-compose.yml
```
推断”）。

Step 1 · Analyze project architecture

步骤1 · 分析项目架构

Read enough of the repo to justify the diagram:

Build & package

pom.xml

build.gradle

package.json

go.mod

requirements.txt

Cargo.toml

, etc.

Config & ops

application.yml

docker-compose.yml

Dockerfile

.env

(or

.env.example

)

Entry & layout

App entry points,
```
src/
```
or language-idiomatic structure, notable modules

C4 elements to identify

Level	What to capture
People	End users, admins, operators, integrators—who uses or operates the system
L1 Software system	This system + external dependencies (DB, MQ, 3rd-party APIs, other microservices)
L2 Containers	Deployable/runnable units: web apps, APIs, workers, DB, cache, brokers, etc.
L3 Components	Inside one core container: controllers/services/repositories/modules—only the most important slice

Large or unclear repos: Prefer a representative L3; merge minor pieces into grouped nodes; document scope in node

sub

or side panel.

阅读仓库中足够的内容来支撑架构图的合理性：

构建与打包文件

pom.xml

、

build.gradle

、

package.json

、

go.mod

、

requirements.txt

、

Cargo.toml

等。

配置与运维文件

application.yml

、

docker-compose.yml

、

Dockerfile

、

.env

（或

.env.example

）

入口与结构文件

应用入口点、
```
src/
```
或对应语言的惯用目录结构、值得注意的模块

需要识别的C4元素

层级	需采集内容
人员	终端用户、管理员、运维人员、集成方——所有使用或运维该系统的角色
L1软件系统	本系统 + 外部依赖（数据库、MQ、第三方API、其他微服务）
L2容器	可部署/可运行单元：Web应用、API、工作进程、数据库、缓存、消息代理等。
L3组件	在一个核心容器内部：控制器/服务/仓库/模块——仅采集最重要的部分

大型或不明确的仓库：优先输出有代表性的L3内容；将次要模块合并为分组节点；在节点的

sub

字段或侧边栏中说明覆盖范围。

Step 2 · Build the interactive HTML

步骤2 · 构建交互式HTML

Overall design

整体设计

Theme: Light, professional—white/light gray background, clean typography.
Top bar: Project name + breadcrumb
```
L1 / L2 / L3
```
(each segment clickable to go back to that level).
Legend row: Colored dots for node categories (People / core / external / interface / domain / infra, etc.—align with your
```
legends
```
data).

主题：浅色、专业风格——白色/浅灰色背景、简洁的排版。
顶部栏：项目名称 + 面包屑导航
```
L1 / L2 / L3
```
（每个分段都可点击返回对应层级）。
图例行：用不同颜色的圆点标识节点类别（人员/核心/外部/接口/领域/基础设施等——与
```
legends
```
数据保持一致）。

Three canvases

三个画布

1) L1 System Context (default)

Layout: People (left), core system (center, highlighted, clickable → L2), external systems (right).
SVG curved edges between nodes; label protocol when known (
```
HTTP
```
,
```
gRPC
```
,
```
MQ
```
,
```
JDBC
```
, etc.).
Only the core system shows a “点击下钻” (or “Drill down ↓”) badge; all other nodes use opacity: 0.5
(dimmed).
Click core → switch canvas to L2.
Click dimmed node → open right panel (relationships + description); do not change level.

2) L2 Containers

Show all internal containers with layer separators and labels, e.g. 接口层 → 应用层 → 领域层 → 基础设施层 (or equivalent for the stack).
SVG edges for calls/data flow.
Only the container that has L3 content: colored border + drill badge +
```
cursor: pointer
```
.
Containers without L3: dimmed (
```
opacity: 0.5
```
), no badge; click opens panel only.
Click drillable container → L3.

3) L3 Components

Components grouped by function; SVG edges for dependencies.
Every node click opens the side panel (no further drill level required).

1) L1系统上下文（默认展示）

布局：人员（左侧）、核心系统（居中、高亮、点击可进入L2）、外部系统（右侧）。
节点之间使用SVG曲线连接；如果已知协议则标注（
```
HTTP
```
、
```
gRPC
```
、
```
MQ
```
、
```
JDBC
```
等）。
仅核心系统显示**“点击下钻”（或“Drill down ↓”）标识；所有其他节点使用
```
opacity: 0.5
```
**（灰度变暗）。
点击核心系统 → 切换画布到L2。
点击灰度节点 → 打开右侧面板（展示关联关系 + 描述）；不切换层级。

2) L2容器层

展示所有内部容器，带有层分隔线和标签，例如接口层 → 应用层 → 领域层 → 基础设施层（或对应技术栈的等价分层）。
使用SVG连线表示调用/数据流。
仅包含L3内容的容器：显示彩色边框 + 下钻标识 +
```
cursor: pointer
```
。
无L3内容的容器：灰度显示（
```
opacity: 0.5
```
）、无下钻标识；点击仅打开侧边栏。
点击可下钻的容器 → 进入L3。

3) L3组件层

组件按功能分组；使用SVG连线表示依赖关系。
所有节点点击都会打开侧边栏（无需支持更深层级的下钻）。

Right panel

右侧面板

Fixed width 380px, slides in from the right.
Shows: name, level badge (L1/L2/L3), description, related relationships (list of edges touching the node).
ESC or × closes the panel.

固定宽度380px，从右侧滑入。
展示内容：名称、层级标识（L1/L2/L3）、描述、相关关联关系（所有关联到该节点的连线列表）。
按ESC或点击**×**关闭面板。

Node styling

节点样式

Drillable: colored border/background treatment + top-right badge “点击下钻 ↓” +
```
cursor: pointer
```
.
Non-drillable:
```
opacity: 0.5
```
, no badge; click → panel only.
Selected: blue glow/shadow; incident edges emphasized; other edges and nodes fade.

可下钻节点：彩色边框/背景样式 + 右上角标识“点击下钻 ↓” +
```
cursor: pointer
```
。
不可下钻节点：
```
opacity: 0.5
```
、无下钻标识；点击仅打开面板。
选中节点：蓝色发光/阴影效果；关联连线高亮；其他连线和节点变暗。

Data shape (embed in HTML)

数据结构（嵌入HTML中）

Use one object per level (names may be

L1

L2

L3

level1

—be consistent in JS):

javascript

const L1 = {
  nodes: [
    {
      id: 'unique-id',
      label: '显示名称',
      sub: '描述 / 推断依据',
      c: 'color-key',
      x: 0,
      y: 0,
      w: 180,
      drill: true,
      drillTo: 'L2',
    },
  ],
  edges: [
    { f: 'from-id', t: 'to-id', c: 'color-key', protocol: 'HTTP' },
  ],
  layers: [{ y: 120, label: '层名称', color: '#ccc' }],
  legends: [{ c: 'core', l: '核心系统' }],
};

c
: maps to the palette / CSS class for node category.
protocol
: optional; show on or near the edge if present.
No external JSON fetch—all data inline in the same file.

每个层级使用一个对象（名称可以是

L1

、

L2

、

L3

或

level1

——JS代码中保持一致即可）：

javascript

const L1 = {
  nodes: [
    {
      id: 'unique-id',
      label: '显示名称',
      sub: '描述 / 推断依据',
      c: 'color-key',
      x: 0,
      y: 0,
      w: 180,
      drill: true,
      drillTo: 'L2',
    },
  ],
  edges: [
    { f: 'from-id', t: 'to-id', c: 'color-key', protocol: 'HTTP' },
  ],
  layers: [{ y: 120, label: '层名称', color: '#ccc' }],
  legends: [{ c: 'core', l: '核心系统' }],
};

c
：对应节点类别的调色板/CSS类。
protocol
：可选字段；如果存在则显示在连线旁或连线上。
无外部JSON请求——所有数据都内联在同一个文件中。

Color palette (light mode)

调色板（浅色模式）

Background
```
#f5f7fa
```
, cards
```
#ffffff
```
, hover
```
#f0f2f5
```
Core:
```
#1168BD
```
· Domain/data:
```
#2b8a3e
```
· External/AI:
```
#6f42c1
```
· Interface:
```
#d4620a
```
· Governance:
```
#b8860b
```

背景
```
#f5f7fa
```
、卡片
```
#ffffff
```
、悬停态
```
#f0f2f5
```
核心：
```
#1168BD
```
· 领域/数据：
```
#2b8a3e
```
· 外部/AI：
```
#6f42c1
```
· 接口：
```
#d4620a
```
· 治理：
```
#b8860b
```

Fonts

字体

Allowed external dependency: Google Fonts CDN (e.g. a Latin + CJK-friendly stack). If CDN is undesirable, use a system font stack that supports Chinese: e.g.
```
system-ui, "PingFang SC", "Microsoft YaHei", sans-serif
```
.

允许的外部依赖：Google Fonts CDN（例如支持拉丁字符+CJK的字体栈）。如果不希望使用CDN，使用支持中文的系统字体栈：例如
```
system-ui, "PingFang SC", "Microsoft YaHei", sans-serif
```
。

Layout quality

布局质量

Avoid overlapping nodes; keep edge labels readable; use canvas size / coordinates so the diagram fits a typical laptop viewport with scroll as fallback.

避免节点重叠；保持连线标签可读；设置合适的画布尺寸/坐标，使图表适配典型的笔记本电脑视口，允许滚动作为兜底方案。

Step 3 · Output path

步骤3 · 输出路径

Default: save as <workspace-root>/c4-architecture.html
— the current conversation project directory (Cursor: the workspace folder for a single-folder workspace; Claude Code / other hosts: the project
```
cwd
```
used for analysis). Filename stays
```
c4-architecture.html
```
.
User override (same turn): if the user asks for a path under the project (e.g.
```
docs/c4-architecture.html
```
), honor it relative to the chosen workspace root unless they give an absolute path; create parent directories when safe.
Multi-root workspace: if several folders are open and the user did not specify a project, use the root that was the focus of architecture analysis, or ask which root to use before writing.
Unknown root or not writable: do not silently fall back to
```
~/Downloads
```
or elsewhere. Ask the user for an explicit directory or full file path and state the reason (e.g. permission, ambiguous root).
After writing, confirm the absolute path in the assistant message.

默认路径：保存到**
```
<工作区根目录>/c4-architecture.html
```
** —— 即当前会话的项目目录（Cursor：单文件夹工作区的工作区文件夹；Claude Code/其他平台：用于分析的项目
```
cwd
```
）。文件名固定为
```
c4-architecture.html
```
。
用户自定义路径（同轮会话内）：如果用户要求保存到项目下的某个路径（例如
```
docs/c4-architecture.html
```
），除非用户给出绝对路径，否则以选定的工作区根目录为相对路径；安全情况下自动创建父目录。
多根工作区：如果打开了多个文件夹且用户未指定项目，使用架构分析聚焦的根目录，或者在写入前询问用户要使用哪个根目录。
根目录未知或无写入权限：不要静默回退到
```
~/Downloads
```
或其他位置。询问用户明确的目录或完整文件路径并说明原因（例如权限问题、根目录不明确）。
写入完成后，在助理回复中确认绝对路径。

Acceptance checklist (before finishing)

验收检查清单（完成前确认）

Single file, opens in a normal browser; no npm/build step.
Breadcrumb, legend, L1/L2/L3 behavior, panel, ESC close, selection highlight—all present.
Core system-only drill on L1; single L3 target; dimmed nodes behave as specified.
Chinese labels render correctly (
```
<meta charset="utf-8">
```
+ fonts).
File written to workspace root default (
```
c4-architecture.html
```
) or user-agreed path; absolute path confirmed in reply.

单文件，可在普通浏览器中打开；无需npm/构建步骤。
面包屑、图例、L1/L2/L3交互逻辑、面板、ESC关闭、选中高亮——所有功能都已实现。
L1层仅核心系统可下钻；仅单个L3目标；灰度节点行为符合规范。
中文标签渲染正常（
```
<meta charset="utf-8">
```
+ 字体配置正确）。
文件写入到工作区根目录默认路径（
```
c4-architecture.html
```
）或用户同意的路径；回复中确认了绝对路径。

c4-interactive-html

Original

Translation

c4-interactive-html

c4-interactive-html

Architectural anchors (from design)

架构锚点（基于设计规范）

Step 1 · Analyze project architecture

步骤1 · 分析项目架构

Step 2 · Build the interactive HTML

步骤2 · 构建交互式HTML

Overall design

整体设计

Three canvases

三个画布

Right panel

右侧面板

Node styling

节点样式

Data shape (embed in HTML)

数据结构（嵌入HTML中）

Color palette (light mode)

调色板（浅色模式）

Fonts

字体

Layout quality

布局质量

Step 3 · Output path

步骤3 · 输出路径

Acceptance checklist (before finishing)

验收检查清单（完成前确认）

Related doc

相关文档