【提示词工程】让语言模型直接在网页端渲染Graphviz图表,完美替代mermaid渲染器,欢迎佬来优化提示词

Graphviz问答版提示词:

用Graphviz和我对话,所有回答必须生成Graphviz图表并遵守以下规则:

**代码规范**  
1. 属性必须用逗号分隔:`[shape=record, label="数据流"]`  
2. 每个语句单独成行且分号结尾(含子图闭合)🚀  
3. 中文标签不需要空格的地方不要空格  
4. 图表外可以用文字补充回答  

**URL编码**  
1. 空格转%20,保留英文双引号  
2. URL必须是单行(无换行符)  
3. 特殊符号强制编码:  
   - 加号 `+` → `%2B`  
   - 括号 `()` → `%28%29`  
   - 尖括号 `<>` → `%3C%3E`  
   - 百分号 `%` → `%25` 🚀  

**错误预防**  
```markdown
1. 箭头仅用`->`(禁用→或-%3E等错误格式)  
2. 中文标签必须显式声明:`label="用户登录"`  
3. 节点定义与连线分开书写,禁止合并写法  
4. 每个语句必须分号结尾(含最后一行)💥分号必须在语句末尾而非属性内  
5. 禁止匿名节点(必须显式命名)  
6. 中文标签禁用空格(用%20或下划线替代空格)  
7. 同名节点禁止多父级(需创建副本节点)  
8. 节点名仅限ASCII字符(用label显示中文)🚀  
9. 子图闭合必须加分号:`subgraph cluster1{...};` 🚀  
```

**输出格式**(严格遵循):  
![流程图](https://quickchart.io/graphviz?graph=digraph{rankdir=LR;start[shape=box,label="开始"];process[shape=ellipse,label="处理数据"];start->process[label="流程启动"];})  
[点击跳转或右键复制链接](https://quickchart.io/graphviz?graph=digraph{rankdir=LR;start[shape=box,label="开始"];process[shape=ellipse,label="处理数据"];start->process[label="流程启动"];})

---

### **高频错误自查表**
```graphviz
digraph {
  // ✅正确示例
  jms[label="詹姆斯·西蒙斯"];  // 🚀ASCII节点名+中文label
  nodeA[shape=box,label="收益率%28年化%29"];  // 🚀括号%28%29+百分号%25
  subgraph cluster1{label="第一部分";};  // 🚀子图闭合带分号
  
  // ❌错误示例
  危险节点[label="Python(科学)"];           // 💥括号未编码
  错误基金[label="年化66%"];               // 💥百分号未转义%25
  中文节点名[shape=box];                  // 💥非ASCII节点名
  subgraph cluster2{label="错误子图"}      // 💥缺少闭合分号
}
```

根据已有信息输出图表可用下面提示词:

生成Graphviz图表并遵守以下规则:

**代码规范**  
1. 属性必须用逗号分隔:`[shape=record, label="数据流"]`  
2. 每个语句单独成行且分号结尾(含子图闭合)🚀  
3. 中文标签不需要空格的地方不要空格  
4. 图表外可以用文字补充回答  

**URL编码**  
1. 空格转%20,保留英文双引号  
2. URL必须是单行(无换行符)  
3. 特殊符号强制编码:  
   - 加号 `+` → `%2B`  
   - 括号 `()` → `%28%29`  
   - 尖括号 `<>` → `%3C%3E`  
   - 百分号 `%` → `%25` 🚀  

**错误预防**  
```markdown
1. 箭头仅用`->`(禁用→或-%3E等错误格式)  
2. 中文标签必须显式声明:`label="用户登录"`  
3. 节点定义与连线分开书写,禁止合并写法  
4. 每个语句必须分号结尾(含最后一行)💥分号必须在语句末尾而非属性内  
5. 禁止匿名节点(必须显式命名)  
6. 中文标签禁用空格(用%20或下划线替代空格)  
7. 同名节点禁止多父级(需创建副本节点)  
8. 节点名仅限ASCII字符(用label显示中文)🚀  
9. 子图闭合必须加分号:`subgraph cluster1{...};` 🚀  
```

**输出格式**(严格遵循):  
![流程图](https://quickchart.io/graphviz?graph=digraph{rankdir=LR;start[shape=box,label="开始"];process[shape=ellipse,label="处理数据"];start->process[label="流程启动"];})  
[点击跳转或右键复制链接](https://quickchart.io/graphviz?graph=digraph{rankdir=LR;start[shape=box,label="开始"];process[shape=ellipse,label="处理数据"];start->process[label="流程启动"];})

---

### **高频错误自查表**
```graphviz
digraph {
  // ✅正确示例
  jms[label="詹姆斯·西蒙斯"];  // 🚀ASCII节点名+中文label
  nodeA[shape=box,label="收益率%28年化%29"];  // 🚀括号%28%29+百分号%25
  subgraph cluster1{label="第一部分";};  // 🚀子图闭合带分号
  
  // ❌错误示例
  危险节点[label="Python(科学)"];           // 💥括号未编码
  错误基金[label="年化66%"];               // 💥百分号未转义%25
  中文节点名[shape=box];                  // 💥非ASCII节点名
  subgraph cluster2{label="错误子图"}      // 💥缺少闭合分号
}
```

如果需要竖向版图表,可以修改代码中的LR为TB,或者之间要求输出竖向图表

:globe_with_meridians: 跨平台支持

:mag: 完整案例演示

量子计算架构图查看完整案例

:books: 延伸资源

165 Likes

感谢分享!!

31 Likes


Claude的网页端对外来链接比较严格

32 Likes

试探DeepSeek R1的极限

34 Likes

L站的markdown,显示不了图

点击查看完整量子架构图

30 Likes

留个位置。要好好学习一下!

29 Likes

学习了。感谢佬友

22 Likes

用提示词做到了比客户端集成mermaid渲染工具更好的效果,我简直是天才

9 Likes

我勒个豆,graph后面的才是内容,前面的只是用markdown打开了https://quickchart.io/ 的一张图片吧?我猜原理是这个意思

8 Likes

对的,本质上是quickchart渲染的图片,markdown语法显示了链接中的图片

6 Likes

太强了佬

4 Likes

这么复杂的 啥提示词啊?
我试了下,生出的很简单的

1 Like

你要输出的内容复杂,图表就复杂。我就是直接说,我要一个复杂的示例

https://www.yeahhe.online/OneDriveShare/小虎会享/📚电子书/💡AI提示词/Graphviz图表.html

提示词同步在我的网站

2 Likes

佬,能修改一下提示词继续限制一下输出的图片高宽比例么,根据用户要求给出横板或竖版的图.是不是会更好啊

1 Like

默认横向的,我觉得横向的舒服,你可以自行修改提示词改为竖向

先收藏下,明天试试,谢谢分享。

1 Like

这个参数就是横向的意思

竖向怎么写:sweat_smile:

2 Likes

你的网站,很棒

3 Likes