| name | flowchart-to-instagram |
| description | 将 Mermaid flowchart TD 或层级内容转换为 Instagram 风格信息图，适合微信公众号投放。解析结构而非简单渲染，设计层级递进的视觉卡片。 |
| tags | ["flowchart","instagram","wechat","公众号","信息图","infographic","题材调研员"] |
| global | true |
flowchart-to-instagram
将 Mermaid flowchart TD 或层级内容转换为 Instagram 风格信息图，适合微信公众号投放。
核心功能
- 解析而非渲染：提取内容结构和层级关系
- Instagram 风格设计：渐变背景、毛玻璃卡片、柔和配色
- 层级递进布局：根据分组智能排版
- 品牌水印：2×2 网格，透明度 6%，旋转 -20°
设计规范（v1.0 最终版）
背景渐变
background: linear-gradient(135deg,
#833ab4 0%,
#fd1d1d 50%,
#fcb045 100%
);
紫 → 红 → 橧，Instagram 经典配色。
水印样式
- 2×2 网格布局（4个水印）
- 字体大小：180px
- 透明度：6%
- 旋转：-20°
- 颜色：rgba(255, 255, 255, 0.06)
卡片样式
- 半透明毛玻璃效果
- 渐变方向与背景一致（135deg）
- 不同区块有微色调呼应背景：
- 上游：粉紫色调
- 中游：红粉色调
- 下游：橙红色调
- 出海/政策：橙黄色调
字体规范
- 大标题（section-title）：24px，font-weight: 700，#1a1a1a，居中显示
- 节点标题：19px，font-weight: 600，#1a1a1a
- 描述文字：15px，font-weight: 400，#3a3a3a
布局规范
- 最大宽度：800px
- 卡片内边距：p-6（24px）
- 节点内边距：p-5（20px）或 p-4（16px）
- 卡片间距：gap-5（20px）
节点配色（柔和渐变）
node-1: #fef7f7 → #fce8e8（粉红）
node-2: #fef9f3 → #fde9d9（橙粉）
node-3: #fef8f0 → #fde5cc（橙黄）
node-4: #f4fef7 → #dcf8e3（绿）
node-5: #f3f7fe → #dce5f8（蓝）
node-6: #f8f5fe → #e8dcf8（紫）
卡片底色（与背景呼应）
.card-1: rgba(255,240,250,0.9) → rgba(255,245,255,0.92) → rgba(255,250,245,0.9)
.card-2: rgba(255,235,245,0.9) → rgba(255,240,250,0.92) → rgba(255,245,240,0.9)
.card-3: rgba(255,230,240,0.9) → rgba(255,235,245,0.92) → rgba(255,240,235,0.9)
.card-4: rgba(255,235,235,0.9) → rgba(,,,) → (,,,)
使用方法
方法一：Mermaid 解析器（推荐，v1.1 新增）
自动解析 Mermaid flowchart TD 语法，生成 Instagram 风格信息图：
cd ~/projects/flowchart-to-instagram
python scripts/parse_mermaid.py input.mmd output.html
node scripts/screenshot.mjs output.html output.png
python scripts/parse_mermaid.py --demo
方法二：Markdown Mermaid 批量转换（v2.0 新增）
从 Markdown 文件中提取所有 Mermaid 代码块，批量转换为图片：
cd ~/projects/flowchart-to-instagram
python scripts/md2images.py report.md
python scripts/md2images.py report.md -o ./images/
python scripts/md2images.py report.md --prefix fig_
python scripts/md2images.py report.md --update
python scripts/md2images.py report.md --theme instagram
python scripts/md2images.py --list-themes
输出说明：
- 默认输出到
output/ 目录
- 文件命名：
{prefix}{index}.png（如 chart_1.png, chart_2.png）
--update 模式会将 Markdown 中的代码块替换为  格式
支持的 Mermaid 格式：
%% title: 产业链图谱标题
%% watermark: 题材调研员
flowchart TD
subgraph SG1["上游：材料与电芯"]
A1["碳酸锂\n锂精矿"]
A2["正极材料\n负极材料\n隔膜电解液"]
A3["电芯制造\n宁德时代\n比亚迪·亿纬"]
A1 --> A2
A2 --> A3
end
subgraph SG2["中游：系统集成"]
B1["储能电池系统\nPACK + BMS"]
B2["储能变流器\nPCS"]
A3 --> B1
B1 --> B2
end
subgraph SG3["下游：应用场景"]
C1["电源侧\n新能源配储"]
C2["电网侧\n独立储能"]
B2 --> C1
B2 --> C2
end
解析器特性：
- 自动提取 subgraph 作为层级卡片
- 节点格式：
A["标题\n描述"]（换行符 \n 分隔标题和描述）
- 支持注释配置：
%% title: 和 %% watermark:
- 节点按 subgraph 定义位置自动分组
- Icon 支持：节点开头可添加图标
- Emoji：
A["🧪 氟化液"] → 图标渲染在标题上方
- Font Awesome：
A["fa:flask 氟化液"] → 使用FA图标库
方法三：修改模板文件
- 编辑
templates/instagram-card.html
- 修改内容区块（标题、节点）
- 用浏览器打开，截图导出
文件结构
~/projects/flowchart-to-instagram/
├── README.md # 项目文档
├── SKILL.md # 技能文档
├── scripts/
│ ├── parse_mermaid.py # Mermaid 解析脚本
│ ├── md2images.py # Markdown 批量转换脚本（v2.0 新增）
│ └── screenshot.mjs # HTML → PNG 截图脚本（Playwright）
├── templates/
│ └── instagram-card.html # HTML 模板
├── data/
│ ├── 储能产业链.mmd # 示例 Mermaid 文件
│ └── test_mermaid.md # 示例 Markdown 文件
└── output/ # 输出目录
迭代记录
v2.0 (2026-04-12)
- 新增 md2images.py：Markdown Mermaid 批量转换
- 从 markdown 文件提取所有 mermaid 代码块
- 批量转换为 PNG 图片
- 支持
--update 参数自动替换代码块为图片链接
- 禁用 icon 显示：icon_to_html() 直接返回空字符串
v1.9 (2026-04-12)
- 截图尺寸修复：Playwright在高DPI显示器上生成1839px宽度问题
- 使用
clip 强制裁剪到820px宽度
- viewport高度从600增至2000，让内容自然展开
- 添加
--force-device-scale-factor=1 启动参数
- 使用
document.body.scrollHeight 获取真实内容高度
- Emoji自动匹配扩展：新增50+关键词映射
- 终端应用：大模型训练(🧠)、智能驾驶(🚗)、具身机器人(🤖)、科学研究(🔬)、终端(💡)
- 算力：算力(💻)、智算(🖥️)、超算(⚡)、数据中心(🏢)
- 基础设施：电力(⚡)、能源(🔋)、基建(🏗️)、运维(🔧)
- 协议与技术：协议(📜)、标准(📋)、接口(🔌)、架构(🏛️)
- 材料与制造：材料(🧪)、制造(🏭)、工艺(⚙️)、设备(🔧)
- 出海与应用：出海(🚢)、应用(🎯)、方案(📋)、场景(🎬)
- 链路追踪算法重构：修复节点丢失和错误箭头问题
- 新算法：
analyze_hierarchical_structure 改用BFS链路追踪
- 从根节点开始，逐层追踪完整链路（支持A→B→C→D多层级）
- 支持分叉（A→B, A→C 形成两条链路）
- 孤立节点单独成链，无箭头
- Bug修复：终端应用布局遗漏描述文字：
- 原实现：
is_terminal_style布局只渲染title，忽略desc
- 新实现：检查是否有desc，渲染描述文字并增加内边距
- 影响：上游节点（如"英伟达"+"全球GPU霸主"）正确显示描述
- Bug修复：孤立节点位置错误：
- 原实现：孤立节点（无连接）被单独放最后
- 新实现：孤立节点与第一个父节点并列显示（同一行）
- 影响：B4节点（鹏鼎/生益）与B1节点（浪潮/华勤）并列
v1.8 (2026-04-12)
- 自动匹配 Emoji 功能文档化：
EMOJI_KEYWORDS 字典：100+产业链关键词映射auto_match_emoji(title) 函数：无显式icon时自动添加- 调用位置：
parse_node_content() 返回前
- 输出路径说明：明确CLI用法，HTML/PNG输出到
output/ 目录
v1.7 (2026-04-12)
- 层级布局渲染修复：修复父子节点排列方式
- 原实现：每列纵向排列（父→子垂直）
- 新实现：第一行父节点横向并列，第二行子节点横向并列（各自分组内）
- 中间添加向下箭头行，视觉递进更清晰
v1.6 (2026-04-12)
- 层级布局：新增树形结构布局（父节点→多个子节点）
- 自动识别父子关系（通过连接关系）
- 与线性链路布局智能切换
v1.5 (2026-04-12)
- Icon 支持（Font Awesome + Emoji + 自动匹配）：节点内容可包含图标，渲染在标题上方
- Font Awesome 格式：
A["fas:mobile-alt 消费电子驱动\n手机+PC为主"]
- 支持前缀：
fa、fas（solid）、fab（brands）、far（regular）
- 使用 Font Awesome 6.5.1 CDN
- 自动识别开头emoji作为icon保留
- 自动匹配 Emoji：如果节点没有显式icon，根据标题关键词自动添加
EMOJI_KEYWORDS 字典：100+关键词映射（产业链专用）- 示例：
冷却液 → 🧪，AI → 🤖，服务器 → ️️，温控 → 🌡️
- 调用
auto_match_emoji(title) 在 parse_node_content() 中自动添加
icon_to_html() 函数：检测 : 决定是FA图标还是emoji
- Emoji unicode范围修复：部分emoji无法识别（如 ⚙️、⭐）
- 原正则
\U00002702-\U000027B0 无法匹配 ⚙️（U+2699=9881 < U+2702=9986）
- 新范围
\U00002600-\U000027BF 包含完整 Misc Symbols + Dingbats
- 新范围
\U00002B50-\U00002B55 包含星星符号 ⭐
- 新范围
\U0000FE00-\U0000FE0F 包含 Variation Selectors（文本符号变emoji的组合字符）
- 新范围
\U0001F1E0-\U0001F1FF 包含 Flags（国旗等区域性符号）
- Bug修复：
remove_emoji() 函数 unicode 范围 \U000024C2-\U0001F251 包含中文 CJK 字符区域
- 导致中文字符被错误删除（如
消费电子驱动 → +PC）
- 解决：移除该 unicode 范围，只保留精确的 emoji 区域
v1.4 (2026-04-11)
- 保留 emoji 图标：subgraph 标题中的 emoji 现在正确显示（如 🏭 上游材料层）
- 移除 remove_emoji() 调用，让 emoji 自然渲染
- 添加 .gitignore 排除 node_modules、output、pycache
- 添加示例数据文件（内存涨价链、内存范式演变、液冷产业链）
v1.3 (2026-04-11)
- 过滤 %%{init}%% 配置块和 style 定义行
- 支持节点内容换行（\n 转换为
标签）
- 修复连接正则表达式，避免匹配数字中的
-（如 90-95%）
v1.2 (2026-04-11)
- Bug修复：支持中文 subgraph ID（如
subgraph 上游["标题"]）
- 原正则
[A-Za-z0-9_]+ 只支持英文ID，改为 \S+ 支持任意非空白字符
- Bug修复：过滤
%%{init}%% 配置块，防止误解析字体设置（如 sans-serif）为节点
- 添加
in_init_block 状态跟踪，跳过整个 init 配置块
- Bug修复：过滤
style 定义行，防止误解析样式配置
- 改进：使用
findall 替代 search，正确解析连接行中的节点定义（如 C1 --> C4["标题"]）
v1.3 (2026-04-11)
- Bug修复：连接正则避免匹配数字中的
-
- 原正则
[-<>]+ 会误匹配 90-95%、500-1500元 中的 -
- 改为先去除节点内容
[...]，再匹配明确连接符号 -{2,}>?、->、--
- 样式改进：section-title 居中显示（text-align: center）
- 样式改进：section-title 字体增大至 24px
- 布局改进：高度自适应内容
- 移除
min-height: 100vh，改用 padding-bottom: 20px
- 水印改为
position: absolute（非 fixed）覆盖内容区域
- 截图高度根据实际内容自动调整
v1.0 (2026-04-11)
- Instagram 风格渐变背景（紫→红→橙）
- 2×2 水印布局，180px 字体
- 半透明毛玻璃卡片，底色与背景呼应
- 柔和节点渐变色（6种配色方案）
- 字体规范确立（标题20px、节点19px、描述15px）
- 移除所有 icon，纯文字设计
GitHub 管理
已发布 GitHub: https://github.com/shinelp100/flowchart-to-instagram
版本迭代：
- v1.0: 基础模板，Instagram 风格设计规范
- v1.1: Mermaid 解析器，自动化生成流程
解析器常见问题（v1.2 修复）
1. 中文 subgraph ID 不识别
症状：Subgraph 数量为 0 或少于预期
原因：原正则 [A-Za-z0-9_]+ 只支持英文ID
解决：改为 \S+ 支持中文ID（如 上游、中游）
2. 节点数量异常多（如出现 "sans"、"serif"）
症状：节点数比预期多，出现奇怪节点名
原因：%%{init}%% 配置块中的字体设置被误解析
解决：添加 in_init_block 状态跟踪，跳过整个 init 配置块
3. 节点丢失（连接行中定义的节点）
症状：节点数少于预期，C1 --> C4["标题"] 中 C4 未识别
原因：原逻辑用 search 只匹配第一个节点定义
解决：改用 findall 匹配所有节点定义
4. style 行被误解析
症状：出现无关节点
原因：style A1 fill:#xxx 行被正则匹配
解决：添加 style 行过滤
5. 连接正则误匹配数字中的 -
症状：节点数异常，如 90、95 被识别为连接节点
原因：原正则 [-<>]+ 匹配了 90-95%、500-1500元 中的 -
解决：预处理去除 [...] 内容，再匹配明确连接符号 -->、->、--
6. 中文字符被删除（remove_emoji unicode 范围过宽）
症状：节点内容中文消失，如 消费电子驱动\n手机+PC为主 → +PC
原因：remove_emoji() 正则 \U000024C2-\U0001F251 范围包含 CJK 字符区域
解决：移除该 unicode 范围，只保留精确的 emoji 区域
7. 输出路径问题
症状：生成PNG后找不到文件，或HTML写入错误目录
原因：脚本默认将HTML输出到输入文件同目录
解决：明确指定输出路径：
python scripts/parse_mermaid.py data/input.mmd output/input.html
node scripts/screenshot.mjs output/input.html output/input.png
8. 截图尺寸异常（宽度1839px而非820px）
症状：PNG宽度为1839px，内容变成宫格布局，仅在左上角显示
原因：Playwright在高DPI显示器上忽略deviceScaleFactor设置，fullPage模式放大截图
解决：修改 scripts/screenshot.mjs：
const context = await browser.newContext({
viewport: { width: 820, height: 2000 },
deviceScaleFactor: 1,
isMobile: false,
hasTouch: false
});
const height = await page.evaluate(() => document.body.scrollHeight);
await page.screenshot({
clip: { x: 0, y: 0, width: 820, height: height }
});
v1.9更新：screenshot.mjs 已修复此问题，现默认输出正确820px宽度
8. Font Awesome Icon 使用
格式：节点内容开头添加 fa:icon-name 或 fas:icon-name
示例：A["fas:server 液冷服务器\n整机柜方案"]
渲染：图标在标题上方，使用 Font Awesome 6.5.1 CDN
待开发功能
