用途：该技能使用 Mermaid.js 生成简洁多彩的交互式工作流程图，用于智能教材中以 iframe 嵌入的窄区域，并按照 MicroSim 模式打包为完整组件。因为它属于使用 MkDocs 制作教材的工作流，设计目标是不加复杂内边距、边框或装饰，重在教育而非炫技。
主要能力：适用于工作流程图、带分支逻辑的决策树、算法可视化、系统架构流程、教育过程图、分步步骤图、状态转换图等任意流程图式可视化。每个图支持彩色节点背景、16 点字体、缩放控件、导出 SVG、节点交互跟踪与无障碍特性。
使用方式：先收集需求（目的、关键步骤、决策点、流向、起止点），至少需 3–5 个步骤、清晰的起止点与流程顺序；再设计 Mermaid 代码，按节点用途选择形状（圆角矩形表示起止、矩形表示流程、菱形表示决策、圆形表示连接符），用 classDef 定义样式并确保 font-size 16px，默认使用 flowchart TD 自上而下方向；然后创建目录 mkdir -p /docs/sims/[diagram-name]（kebab-case 命名），基于 assets/template/ 模板生成 main.html、style.css、script.js、index.md、metadata.json 五个文件并替换占位符；接着在 mkdocs.yml 的 nav 中加入页面；最后用 cd /docs 与 mkdocs serve 测试，访问 http://localhost:8000/sims/[diagram-name]/，也可直接在浏览器打开 main.html。
适用场景：面向教材写作，尤其适合计算机科学、生物学等学科的教育过程图，可配合学习目标与 Bloom 分类标注。
限制：资料未提供具体安装命令、收费方式或价格信息；节点过多（超过 15 个）时建议拆分为多个图；需处理 Mermaid 语法错误、字体、配色与响应式等常见问题。