校长博客网站里的可交互图是怎么做到的 如果我想复刻这种操作该怎么实现

Joye 的博客是用 Astro + MDX + React + Tailwind CSS 搭的，而且源码在 GitHub 上是开源的（joyehuang/blog），你可以直接翻源码参考。 文章里那些可以点击切换状态、看流转路径的可交互图，不是贴的图片或用第三方图表库生成的，而是直接把写好的前端交互组件嵌进了文章里。 核心实现原理分三步： 1. 用 MDX 替代普通 Markdown 普通 md 只能写静态图文，但 MDX 允许你在文章正文里直接 import 并渲染 React 组件。文字部分还是正常写 Markdown，到了要放图的地方，直接插入一个自定义的组件标签。 2. Astro 的群岛架构（Islands Architecture）与按需水合 Astro 默认会把页面编译成零 JS 的纯静态 HTML，加载很快。遇到这种需要点击交互的图表组件时，在标签上加一个指令（比如 client:visible 或 client:load），告诉框架：只有当用户滚到这张图时，才单独给这张图加载 React 运行时和状态逻辑，页面其余部分依然是纯静态的。 3. 图表组件本身的实现 其实根本不需要上 Canvas 或 D3 这种重型库。你看他文章里的图（比如点击不同触发器看消息流向、点击不同任务看停在升级阶梯的第几级），本质上就是个小型的状态机： 用 React 的 useState 存当前选中的 tab、步骤或节点 ID。 用 Tailwind CSS 写网格布局、边框、圆角和颜色过渡动画（transition-all），或者配合一点内联 SVG 画连接线。 点击不同按钮时切换 state，高亮对应的卡片、改变文字说明或进度条宽度。 如果你想自己复刻这套操作，最快落地的路径是： 第一步：搭架子 直接用 Astro（跑一下 npm create astro@latest，然后执行 npx astro add mdx react tailwind），或者你习惯用 Next.js 的话配个 next-mdx-remote / Contentlayer 也可以。 第二步：让 coding agent 帮你画图（核心提效点） 手写这种排版和交互状态挺费时间的，现在最爽的做法是直接交给 ca（比如 Claude Code 或 Cursor）。 你先把这一段文章的草稿写好，然后对 ca 说：帮我写一个 React + Tailwind 组件，用来解释上面这段「三段式架构」，左边放四个触发器按钮，点击不同按钮时，中间和右边高亮对应的处理逻辑和文字说明，风格要极简克制、适配暗色模式。 第三步：嵌回文章 把生成的 tsx 组件放到项目的 components 目录下，在你的.mdx 文章开头 import 进来，正文里写上组件标签（Astro 里记得加 client:visible），构建发布就完事了。 你可以直接去 GitHub 搜 joyehuang/blog 仓库，进他的文章目录和组件目录对照着看一眼，结构非常清晰，直接照着抄作业就行。