Chrome 网上应用店:Mermaid Previewer Sidebar
嘿，大家好！我是 Mermaid Previewer Sidebar 的开发者。一直以来，我都觉得在日常工作中绘制图表是一件既重要又有点麻烦的事。特别是当我在和 AI 聊天、写 Markdown 文档或者整理思绪的时候，总希望能够快速地产出流程图、时序图之类的东西。市面上的工具很多，但总感觉差点意思------要么需要来回切换应用，要么预览不够即时。
直到我接触到 Mermaid.js，这个用代码就能生成漂亮图表的库，简直是打开了新世界的大门！它简洁高效，但又面临一个问题：怎么才能更方便地实时预览呢？尤其是对于我们这些经常和 AI 助手打交道，或者需要把图表嵌入到文档里的人来说，上下文切换简直是效率杀手。
于是，我萌生了一个想法：为什么不把 Mermaid 的实时预览功能直接做到 Chrome 浏览器里呢？最好是能以一个侧边栏 的形式存在，这样无论我开多少个标签页，它都能在那儿等着我。经过一番折腾，Mermaid Previewer Sidebar 就这么诞生了！
💖 我为什么做这款插件？
我的初衷很简单，就是为了解决自己和同样有需求的朋友们的痛点：
- 实时反馈，所见即所得： 我希望输入 Mermaid 代码的时候，图表能立刻呈现出来。这样就能快速调整，省去反复编译和刷新页面的麻烦。
- 无缝集成，告别上下文切换： 无论是用 ChatGPT、Gemini 还是 Claude 构思复杂问题，还是在 VS Code 里写技术文档，我都不想为了看一眼图表效果就切出去。侧边栏的形式完美解决了这个问题。
- 多场景适配，提升创作效率： 从简单的流程梳理，到复杂的系统架构图，我希望它能覆盖我日常工作中所有需要图表的场景。
✨ Mermaid Previewer Sidebar 有哪些让我引以为豪的特性？
在开发过程中，我特别注重用户体验，所以加入了一些我认为非常实用的功能：
- 真正的实时渲染： 你在侧边栏敲下每一个字符，图表都会同步更新，这种流畅感真的会上瘾。
- 丰富的图表主题： 不仅仅是默认样式，我还加入了多种主题，甚至包括我很喜欢的手绘/草图风格，让图表不再呆板。
- 下载与分享方便： 一键就能把图表下载成 PNG 或 SVG 文件，无论是插入文档还是分享给同事，都非常方便。
- 侧边栏常驻设计： 它就安安静静地待在你的浏览器右侧（或者你喜欢的位置），随时等待你的调用。
- 针对 AI 聊天的优化： 我知道很多人会用 AI 来生成 Mermaid 代码，所以我特别做了优化，支持一键复制粘贴，让你和 AI 的协作更加顺畅。
- 对 Markdown 的友好支持： 如果你像我一样常用 Markdown 写东西，你会发现它和你的工作流简直是天作之合。
💡 谁会爱上它？
我觉得任何需要快速、直观地绘制图表的朋友都会喜欢它：
- 开发者朋友们，你们平时画架构图、时序图、流程图的需求肯定不少。
- 技术文档撰写者，用它来丰富你的文档，让读者更容易理解。
- 产品经理、设计师，快速画出流程图、用户故事图，提高沟通效率。
- 学生、老师，或者任何需要做演示、整理思路的朋友，它都能帮你省下不少时间。
这款插件是我为了提升个人工作效率而开发的，也希望能帮助到更多有同样需求的朋友。如果你也常常和 Mermaid 图表打交道，或者想让自己的工作流更顺畅，不妨试试我的 Mermaid Previewer Sidebar。它不会让你失望的！
🎁 期待你的体验和反馈！
Chrome 网上应用店:Mermaid Previewer Sidebar