01
背景
为什么做
流程图往往卡在“画图工具太重”与“Markdown 太轻”之间；Mermaid 的优势是可维护，但编辑体验常常不够顺滑。
在线预览
有些站点会因为安全策略拒绝 iframe 嵌入；如果这里是空白，请直接使用上面的“打开线上版本”。
访问方式
对这类项目来说，最强的信息仍然在线上产品本身。下面的说明只负责帮你抓重点，不是替代真实体验。
视觉历史
先看最新状态，旧版本继续保留在下面
这条时间线保留了界面的可读记忆，所以卡片可以展示最新封面，同时不抹掉更早的状态。
最新
Latest
2026-04-04
归档
Archived cover
2026-04-04
旧版 R2
Legacy above-the-fold capture
2026-01-22
旧版 R2
Legacy full-page capture
2026-01-22
项目说明
在打开线上产品前，先看这些
02
场景
应用场景
- 写文档与技术方案：在 README / Spec 中维护图表。
- 产品/流程梳理：快速迭代流程版本，不被拖拽 UI 绑架。
- 学习与分享：以链接/导出图像的方式传播。
03
交付
实现了什么
- 编辑区 + 预览区的实时联动。
- 面向可写性的语法高亮与输入体验。
- 导出能力：把图表带走，进入你的文档与汇报。
04
设计
设计要点
- “输入/输出”一眼可见：把主要精力留给内容本身。
- 低干扰 UI：工具存在感要低，但反馈要及时。
- 默认可用：打开即写，不让用户先做配置。
05
技术
技术实现
- Mermaid 渲染与预览组件化，确保编辑与渲染解耦。
- 以导出为核心的输出链路（SVG/PNG 等）。
流程
从进入到完成的路径
这类项目最适合按“真实产品”去理解：入口、反馈循环和完成状态，与表层界面同样重要。
Write / Preview / Export
打开项目：LIFEOS 个人目标树 
LIFEOS 个人目标树
用目标树/对齐/看板把人生目标结构化，并提供实时解析预览，支持编辑与回看。
打开项目：Prompt Hub 
Prompt Hub
面向个人/独立开发者的实用提示词收集库：精选可复用模板，减少试错成本。
打开项目：CLI Command Reference 
CLI Command Reference
Gemini CLI、Claude Code 与 Shell 交互语法参考：支持搜索、过滤与一键复制。