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