文章分享了使用Mermaid语法结合大模型（如Claude）进行高质量架构图绘制的经验。通过精心设计的提示词，用户可以生成清晰、信息丰富的架构图，解决Mermaid自带UI美观度不足的问题。文章提供了示例提示词，并强调了在特定领域（如电商下单业务）设计高性能、可扩展系统架构图的方法，旨在帮助读者提升绘图效率和质量。

🎨 问题的提出：文章源于群内讨论，指出Mermaid自带UI在画图时存在美观度不足和信息量不够的问题，这促使作者探索更优的解决方案。

💡 解决方案：作者推荐使用Mermaid语法结合大模型（如Claude）进行绘图，通过设计特定的System Prompt，指导模型生成高质量的架构图。

📝 提示词示例：文章提供了详细的System Prompt示例，该Prompt要求模型为特定领域设计高性能、可扩展的系统架构图，并明确了架构图的整体结构、性能扩展性、数据流、关键技术亮点、视觉呈现和补充说明等方面的要求。

✅ 实践效果：作者亲测Claude模型表现最佳，并分享了将提示词应用于电商下单业务的案例，展示了其有效性。强调通过调整提示词中的关键词，可以满足不同设计需求。

🌟 总结与分享：文章鼓励读者尝试并分享使用经验，旨在帮助读者提升绘图质量和效率，并提供了一键三连的支持方式。

原创 Brad强 2025-07-08 21:22 上海

刚才群里有小伙伴说 mermaid 自带的 UI 画图时比较丑，有时候信息量又不够。

刚才群里有小伙伴说 mermaid 自带的 UI 画图时比较丑，有时候信息量又不够。

我之前也经常遇到类似的问题， mermaid 是一个很方便的画图方式，大模型很容易通过代码的方式把它画出来。

亲测下来，Claude依然是表现最好的,其他模型也不错。

大家可以试用一下这段提示词，希望对你有用：

;; 作者: 一支烟花AI社区
;; 版本: 0.1
;; 模型: Claude Sonnet
;; 用途: 云端架构图生成
;; 设定如下内容为你的 *System Prompt*
;;; 要求：
---
请为[特定领域]设计一个高性能、可扩展的系统架构图。系统应能处理[具体性能指标，如每秒处理量]。
重点展示[关键技术或组件]在系统中的应用。
请使用Mermaid语法创建架构图，并遵循以下要求：
1. 整体结构：
   - 划分清晰的子系统或服务组
2. 性能和扩展性考虑：
   - 说明关键组件的横向扩展方案
3. 数据流：
   - 使用箭头和序号标注主要数据流向
   - 区分同步和异步操作
4. 关键技术亮点：
   - 突出展示[关键技术或组件]的作用和优势
   - 简要说明其如何提升系统性能或可靠性
5. 视觉呈现：
   - 使用不同的颜色和形状区分各类组件
   - 为关键节点添加简洁的说明文字
6. 补充说明：
   - 在Mermaid代码下方提供简要的文字解释
   - 说明各主要组件的功能和作用
   - 解释关键设计决策及其原因
   - 要体现出架构和重要交互，核心技术原理
   - 多种图像，多种线条，不要出现文字和图片堆叠，线条贯穿多个组件的情况
   - 不同重要区域使用不同的颜色外框框起来，同时符合移动端尺寸适配
   - 上下竖直排版，长宽比是3:1
请生成Mermaid代码和相应的解释，确保架构设计能够满足指定的性能要求，
并突出[关键技术或组件]在提升系统整体性能和可靠性方面的重要作用。

下面这个是一个例子，我只把第一句提示词改成

“请为电商下单业务设计一个高性能、可扩展的AI Agent系统架构图。”

真正使用的时候需要把这些框框中的关键字调整成符合你设计需要的。

效果还是不错的。

如果对你有用的话一键三连走起。

阅读原文

跳转微信打开