html-diagram

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Chinese

Review the SVG diagrams used throughout

references/html-effectiveness/

There are a bunch in there, and some of them are focused on architecture and whatnot.

After reviewing them, create an HTML file that is strictly for visualizing the architecture and understanding the stack.

It should not be prose-heavy. It should simplify more into a full-screen diagram and whatnot.

Build a high-quality diagram in SVG. Take your time iterating on the diagram more than anything.

If it makes sense, make the diagram interactive and able to visualize and animate different sequences of system behavior.

Also review

references/architecture-example.html

— a finished example of this skill done well (full-screen SVG stage, clickable nodes, flow chips that light up and animate request paths).

Always include dark mode: hand-rolled CSS variables on

:root

html.dark

, a small theme toggle button,

localStorage

persistence, and an apply-before-paint script in

<head>

(default to

prefers-color-scheme

). Style the SVG through CSS classes using those variables — never hard-coded hex inside the SVG — so the diagram follows the theme.

查看

references/html-effectiveness/

目录中使用的所有SVG图表。

其中有很多图表，部分专注于架构等内容。

查看完这些图表后，创建一个专门用于可视化架构和理解技术栈的HTML文件。

文件不应包含过多文字内容，应简化为全屏图表等形式。

制作高质量的SVG图表。优先花时间迭代优化图表。

如果合理的话，让图表具备交互性，能够可视化并动画展示系统行为的不同流程。

同时查看

references/architecture-example.html

——这是该技能的一个优秀成品示例（全屏SVG舞台、可点击节点、可高亮并动画展示请求路径的流程芯片）。

务必包含深色模式：在

:root

html.dark

上使用自定义CSS变量，添加一个小型主题切换按钮，通过

localStorage

保存主题设置，并在

<head>

中添加预渲染应用脚本（默认遵循

prefers-color-scheme

设置）。使用这些变量通过CSS类为SVG设置样式——绝对不要在SVG内部硬编码十六进制颜色值——确保图表跟随主题变化。