可以做两种路线：
推荐：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; border-radius: 10px; padding: 10px 12px; font-size: 14px;
}
textarea { min-height: 180px; resize: vertical; line-height: 1.6; }
button { cursor: pointer; background: linear-gradient(180deg,#2b59ff,#bb2cff); border: none; font-weight: 600; }
button[disabled] { opacity: .5; cursor: not-allowed; }
.options { display: flex; gap: 12px; }
.options > * { flex: 1; }
.status { font-size: 13px; opacity: .8; min-height: 1.2em; }
.out { margin-top: 16px; background: #0f1115; border: 1px dashed #2a2f3a; border-radius: 12px; padding: 16px; overflow: auto; }
.hint { font-size: 12px; opacity: .7; }
.diagram { display: grid; place-items: center; }
.muted { opacity: .8; }
</style>
</head>
<body>
<div class="wrap">
<h1>根据文章生成流程图（SVG）</h1>
<p class="muted">推荐模式：LLM 输出 Mermaid，前端渲染为 SVG。仅演示用，生产环境请使用服务端代理，勿在前端暴露密钥。</p>
<div class="card">
<div class="row">
<div>
<label>OpenAI API Key</label>
<input id="apiKey" type="password" placeholder="sk-..." />
<div class="hint">不会保存到服务器。生产环境请移除该输入框，改用服务端。</div>
</div>
<div class="options">
<div>
<label>模型</label>
<select id="model">
<option value="gpt-4o-mini">gpt-4o-mini (推荐)</option>
<option value="gpt-4o">gpt-4o</option>
</select>
</div>
<div>
<label>输出方式</label>
<select id="mode">
<option value="mermaid">Mermaid → SVG（推荐）</option>
<option value="svg">直接 SVG（高阶）</option>
</select>
</div>
</div>
<div>
<label>粘贴文章内容</label>
<textarea id="input" placeholder="把文本文章粘贴到这里……"></textarea>
</div>
<div>
<button id="go">生成流程图</button>
</div>
<div class="status" id="status"></div>
</div>
<div class="out">
<div class="diagram" id="diagram">等待生成…</div>
</div>
</div>
</div>
<!-- Mermaid (ESM) -->
<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
mermaid.initialize({ startOnLoad: false, theme: 'base', flowchart: { curve: 'basis' } });
const sysMermaid = `你是“流程图生成器”。任务：阅读用户提供的文章或说明，提炼主要步骤与决策，输出一个可读、美观、结构清晰的流程图。严格遵守以下规则：
- 输出格式：仅返回一个 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 代码块。`;
const sysSVG = `你是“SVG 流程图引擎”。任务：阅读用户文章，提炼关键步骤与决策，并直接输出一个美观的、可自适应的单个 <svg> 流程图。严格遵守：
- 输出：只返回一个完整、可独立渲染的 <svg>（包含 <style> 与 <defs>），不得返回任何解释或多余文本。
- 尺寸与自适应：设置 viewBox，width="100%"; 根据内容设定合适高度。
- 主题风格（内联 <style>）：
- 字体：-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'PingFang SC','Microsoft YaHei',sans-serif
- 节点：处理步骤矩形（rx=6，填充 #F8FAFC，边框 #94A3B8）；开始/结束圆角矩形（rx=12）；决策菱形（填充 #FEF3C7，边框 #F59E0B）；I/O 平行四边形
- 连线：#64748B，带箭头 marker
- 布局：自上而下分层（垂直间距≈120，水平间距≈260）；节点宽度 220–260；文本手动分行（每行≤14 汉字，使用 <tspan>）。
- 复用节点 id（s1,p1,d1,e1…），主干路径清晰；决策边可加“是/否”标签。
重要：仅输出一个 <svg>，不使用 Markdown 代码块。`;
const $ = (sel) => document.querySelector(sel);
const btn = $('#go'), statusEl = $('#status'), outEl = $('#diagram');
btn.addEventListener('click', async () => {
const apiKey = $('#apiKey').value.trim();
const model = $('#model').value;
const mode = $('#mode').value;
const text = $('#input').value.trim();
if (!apiKey) { alert('请填写 API Key'); return; }
if (!text) { alert('请粘贴文章内容'); return; }
btn.disabled = true;
statusEl.textContent = '正在分析与生成流程图…';
try {
const systemPrompt = mode === 'svg' ? sysSVG : sysMermaid;
const body = {
model,
temperature: 0.2,
messages: [
{ role: 'system', content: systemPrompt },
{ role: 'user', content: text }
]
};
const resp = await fetch('https://api.openai.com/v1/chat/completions', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + apiKey
},
body: JSON.stringify(body)
});
if (!resp.ok) {
const err = await resp.text();
throw new Error(err || '调用失败');
}
const data = await resp.json();
let content = data.choices?.[0]?.message?.content || '';
if (mode === 'mermaid') {
const code = extractMermaid(content);
const { svg } = await mermaid.render('m-' + Date.now(), code);
outEl.innerHTML = svg;
} else {
const svg = extractSVG(content);
outEl.innerHTML = svg || '<div>未检测到 SVG 输出</div>';
}
statusEl.textContent = '完成 ✅';
} catch (e) {
console.error(e);
statusEl.textContent = '出错：' + e.message;
} finally {
btn.disabled = false;
}
});
function extractMermaid(s) {
const m = s.match(/```(?:mermaid)?\s*([\s\S]*?)```/i);
return (m ? m[1] : s).trim();
}
function extractSVG(s) {
const m = s.match(/<svg[\s\S]*?<\/svg>/i);
return m ? m[0] : '';
}
</script>
</body>
</html>四、使用建议
主题与样式：
Mermaid 已在 init 中设置基础主题变量。需要品牌色时，直接改 themeVariables 即可。
节点数量控制：
在 system 提示词中加“控制在 X–Y 个节点”，能显著提高可读性。
大文档处理：
可在 user 内容前面加一句“请先归纳出目标/起点/关键阶段/决策点，再制图”强化行为。
生产化：
前端切勿直连 LLM。将 API 调用移至后端（如 Cloudflare Workers/Next.js API Routes），并做内容长度校验与输出清洗。
需要的话，我可以：
帮你把主题改成你的品牌配色
加“导出 SVG/PNG/JSON”按钮
支持双语或多流程并排对比渲染
网友回复
