【提示词工程】让语言模型直接在网页端渲染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: 跨平台支持

:magnifying_glass_tilted_left: 完整案例演示

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

:books: 延伸资源

227 个赞
【提示词工程】让模型输出Graphviz图表+文字。阅读流程图结构图,快速学习和理解新知识,打造新的学习方式
【提示词工程】让语言模型直接在网页端生成像素风格头像
【提示词工程】输入LaTeX代码或图片,输出高清LaTeX图片。实现LaTeX代码→图片、手写体公式→图片
【提示词工程】让语言模型直接在网页端渲染二维码图片
【提示词工程】让语言模型直接在网页端渲染统计图
Graphviz 图表渲染提示词:文字转逻辑图,帮助你快速了解文章结构
DeepSeek显示服务器繁忙,是我用太多了还是都是这样
为什么DeepSeek R1如此擅长绘图和制表?
用提示词来起号小红书,太快了
求解:Cherry studio 的Mermaid 效果图渲染问题
【Wiki】提示词库,欢迎佬来投稿
Grok-3 非思考模式也能使用我的 Graphviz 图表渲染提示词
o3 mini联网相比4o联网效果有极大提升
测试发现Grok-3非思考版擅长URL的转义编码,报错率低于Deepseek-R1
腾讯的DeepSeek-R1是满血!
Graphviz 图表渲染提示词在 Poe上线
【教程】将 Graphviz 图表渲染提示词导入 Sider 插件,实现快速将文字转化为逻辑图、流程图
Poe 的 DeepSeek-R1 模型输出速度对比刚刚发布时有明显提升
我在做不同任务时的模型选择策略(综合能力、成本、速度、个人喜好考虑)
广受佬友们好评的 Chat01.ai 春节75折优惠码来啦,低价使用不降智的ChatGPT Pro
【开源】Structure Insight Web更新:优化UI,修复bug
测一波R1写复杂程序能力

感谢分享!!

60 个赞


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

60 个赞

试探DeepSeek R1的极限

62 个赞

L站的markdown,显示不了图

点击查看完整量子架构图

57 个赞

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

56 个赞

学习了。感谢佬友

50 个赞

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

37 个赞

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

34 个赞

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

34 个赞

太强了佬

32 个赞

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

29 个赞

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

30 个赞

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

提示词同步在我的网站

37 个赞

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

35 个赞

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

34 个赞

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

38 个赞

这个参数就是横向的意思

38 个赞

竖向怎么写:sweat_smile:

40 个赞

你的网站,很棒

41 个赞