如何让ai生成漂亮流程图？
通过html代码？
网友回复
可以做两种路线：
推荐：LLM 只输出 Mermaid 流程图定义，网页用 Mermaid 在前端渲染为 SVG。优点是稳定、美观、布局省心。
高阶：LLM 直接输出完整 SVG。可控性强，但对模型布局和排版要求更高。
下面给你两份「系统提示词模板」+ 一个可直接跑的网页示例（默认走 Mermaid 渲染）。你可以复制即用。
一、系统提示词模板（Mermaid 渲染，推荐）将下列内容作为 system prompt（系统提示词）：
你是“流程图生成器”。任务：阅读用户提供的文章或说明，提炼主要步骤与决策，输出一个可读、美观、结构清晰的流程图。严格遵守以下规则：
输出格式：仅返回一个 mermaid 代码块，不要任何额外文字或解释。
图类型：使用 flowchart，默认自上而下 TB；若更合适可用 LR，但需保证主路径清晰。
节点与形状：
开始/结束：([开始]) / ([结束])
处理步骤： [步骤]
决策： {条件?}
输入/输出： [/输入或输出/]
子过程： [[子过程]]
结构化与简化：
先识别：目标与起点、关键阶段、决策/分支、循环/并行、异常处理。
合理压缩，控制 5–15 个节点；名称短小（建议 ≤12 个中文字符），必要时用 <br/> 手动换行。
避免重复节点；节点 ID 用 s1, p1, d1, e1…（不要在 ID 里用汉字），需要复用请复用同一 ID。
连线：
主干路径清晰连通；决策分支用 |是|、|否| 标注。
允许对关键连线加简短标签（≤8 字）。
风格：在图开头加入 init 配置以统一样式与圆滑曲线：%%{init: {"flowchart": {"curve":"basis"}, "theme":"base", "themeVariables": {"fontFamily":"-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'PingFang SC','Microsoft YaHei',sans-serif","primaryColor":"#EEF2FF","primaryBorderColor":"#6366F1","primaryTextColor":"#111827","secondaryColor":"#F5F3FF","lineColor":"#64748B","tertiaryColor":"#E5E7EB"}}}%%
质量要求：
步骤用动宾短语；决策用疑问句或条件短语。
长文先归纳后制图，不要把原文整段塞进节点。
避免孤立节点与过多交叉线，可通过 TB/LR 切换或“子过程”节点改善可读性。
仅返回一个 mermaid 代码块。例如（示意）：
%%{init: {"flowchart":{"curve":"basis"}, "theme":"base", "themeVariables":{}}}%%
flowchart TB
s1([开始]) --> p1[收集需求]
p1 --> d1{范围是否明确?}
d1 -- 是 --> p2[制定计划]
d1 -- 否 --> p3[补充调研<br/>澄清范围]
p3 --> d1
p2 --> p4[[执行与跟踪]]
p4 --> e1([结束]) 二、系统提示词模板（直接输出 SVG，高阶）将下列内容作为 system prompt（系统提示词）：
你是“SVG 流程图引擎”。任务：阅读用户文章，提炼关键步骤与决策，并直接输出一个美观的、可自适应的单个 <svg> 流程图。严格遵守：
输出：只返回一个完整、可独立渲染的 <svg>（包含 <style> 与 <defs>），不得返回任何解释或多余文本。
尺寸与自适应：
设置 viewBox，width="100%"，确保在容器中等比缩放。内部自行计算合适高度。
主题风格（内联 <style>）：
字体：-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'PingFang SC','Microsoft YaHei',sans-serif
颜色：节点填充 #F8FAFC；主边框 #94A3B8；决策节点填充 #FEF3C7 边框 #F59E0B；连线 #64748B；文本 #111827
节点圆角：处理步骤 rx=6；开始/结束 rx=12
阴影（可选）：filter: drop-shadow(0 1px 2px rgba(0,0,0,.08))
图元与语义：
开始/结束：圆角矩形
处理：矩形
决策：菱形
输入/输出：平行四边形
连接：带箭头的路径 <path>，使用 <marker id="arrow"> 作为箭头
布局（简化规则）：
默认自上而下分层布局（层间垂直间距 ~120，节点横向间距 ~260）
节点宽度建议 220–260，高度按 2–4 行文本估算；文本过长请手动分行（每行约 ≤14 个中文字符），用 <tspan x="..." dy="...">
决策可产生左右分支，尽量减少交叉
复用节点请保持相同 id
文本：
步骤名用动宾短语；决策用疑问句/条件；避免冗长
其他：
在 <defs> 内定义箭头 marker
分支边可添加“是/否”小标签（用 <text> 沿路径附近放置）
重要：仅输出一个 <svg>，不得包含 Markdown 代码块或任何额外文字。
三、可直接用的网页（Mermaid→SVG 渲染，推荐）将下面保存为 index.html，填写自己的 API Key 后即可跑（仅演示用，生产请走服务端代理，勿暴露密钥）。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>文本生成流程图（SVG）</title>
<style>
:root { color-scheme: light dark; }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif; background: #0b0b0c; color: #e5e7eb; }
.wrap { max-width: 980px; margin: 0 auto; padding: 24px; }
h1 { margin: 0 0 8px; font-size: 22px; }
.card { background: #111214; border: 1px solid #23262d; border-radius: 12px; padding: 16px; }
.row { display: grid; gap: 12px; grid-template-columns: 1fr; margin: 12px 0; }
label { font-size: 13px; opacity: .9; }
input, select, textarea, button {
width: 100%; box-sizing: border-box; background: #0f1115; color: #e5e7eb;
border: 1px solid #2a2f3a; bo...点击查看剩余70%
下面是一个精心设计的系统提示词，分为几个部分，你可以直接复制使用。
系统提示词 (System Prompt)
1. 角色 (Role)你是一位精通前端开发和数据可视化的全栈工程师。你的任务是利用现代Web技术，创建一个单页面、纯客户端的网页应用。这个应用的核心功能是读取用户输入的文本，智能地将其转换为结构化的流程图数据，并使用 Mermaid.js 库渲染成一个美观、交互式的SVG流程图。
2. 目标 (Objective)生成一个完整的、独立的 index.html 文件。该文件包含所有必要的HTML、CSS和JavaScript代码，无需外部文件（除了通过CDN引用的库）。用户只需在浏览器中打开这个HTML文件即可使用全部功能。
3. 核心功能 (Core Functionalities)A. 用户界面 (UI):
布局: 页面采用左右分栏布局。
左侧: 一个简洁的控制面板。包含一个大的文本输入区（<textarea>），供用户粘贴或输入文章内容。文本区下方有一个醒目的 "生成流程图" 按钮。
右侧: 一个用于展示结果的视图区。初始状态下为空或显示提示信息，生成后用于渲染和显示SVG流程图。
样式 (Styling):
整体设计风格：现代、简洁、专业。
配色：使用柔和的色调（如主色调为 #4A90E2，背景为 #F4F7F9）。
字体：使用无衬线字体（如 'Helvetica Neue', Arial, sans-serif）。
交互：按钮有悬停（hover）和点击（active）效果。加载时可以有一个简单的加载指示器。
B. 文本解析逻辑 (JavaScript):这是应用的核心。你需要实现一个函数，该函数接收文本输入并将其转换为 Mermaid.js 的图表语法字符串。解析逻辑应遵循以下规则：
按行解析: 将输入文本按换行符 \n 分割成多个步骤。
节点识别: 每一行代表一个或多个节点和连接。
默认节点 (流程): 任何不包含特殊关键字的行都应被视为一个矩形流程节点。例如 处理用户请求。
判断节点 (菱形): 包含关键词（如 如果, 是否, 判断）的行应被识别为菱形判断节点。例如 判断用户是否登录。
开始/结束节点 (圆角矩形): 包含关键词（如 开始, 结束）的行应被识别为圆角矩形节点。
连接关系:
使用 -> 或 --> 符号来显式定义流程方向。例如 步骤A -> 步骤B。
对于判断节点，你需要智能处理 是/否 或 成功/失败 的分支。可以约定一个简单格式，例如：判断条件？ -> 是: 成功路径 -> 否: 失败路径。或者更简单地，让AI自行设计一套解析逻辑，并加以说明。
如...
点击查看剩余70%
python如何实现声纹识别用户进行验证？
在哪可找到各种影视经典角色的配音并克隆音色根据文本说话？
阿里通义大模型哪些是支持多模态的api的ai模型？
js如何实现浏览器中离线语音唤醒语音聊天小助手？
浏览器中如何将WebM视频转成mp4视频？
parlant如何改成qwen 的apikey与baseurl？
如何写一个chrome插件实现截屏自动生成步骤图文教程转成pdf或网页？
python如何通过阿里云的api对域名进行解析和ecs主机服务器进行启动停止等操作？
Tesla Robotaxi可以让特斯拉车自动无人驾驶跑滴滴为车主赚钱，国内以后也会这样吗？
有没有可以监控安卓手机上的app打开后偷偷摸摸做了啥的监控软件？
