Menu
将 Mermaid flowchart TD 或层级内容转换为 Instagram 风格信息图，适合微信公众号投放。解析结构而非简单渲染，设计层级递进的视觉卡片。
The review-first prompt is selected by default. You can switch to a direct command or download a local copy.
Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/shinelp100/flowchart-to-instagram --skill flowchart-to-instagramThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Based on SOC occupation classification
Showing SKILL.md
| name | flowchart-to-instagram |
| description | 将 Mermaid flowchart TD 或层级内容转换为 Instagram 风格信息图，适合微信公众号投放。解析结构而非简单渲染，设计层级递进的视觉卡片。 |
| tags | ["flowchart","instagram","wechat","公众号","信息图","infographic","题材调研员"] |
| global | true |
将 Mermaid flowchart TD 或层级内容转换为 Instagram 风格信息图，适合微信公众号投放。
background: linear-gradient(135deg,
#833ab4 0%,
#fd1d1d 50%,
#fcb045 100%
);
紫 → 红 → 橧，Instagram 经典配色。
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 flowchart TD 语法，生成 Instagram 风格信息图：
cd ~/projects/flowchart-to-instagram
# 步骤1：解析 Mermaid 文件生成 HTML
python scripts/parse_mermaid.py input.mmd output.html
# 步骤2：HTML 转 PNG 截图
node scripts/screenshot.mjs output.html output.png
# 或使用 --demo 测试
python scripts/parse_mermaid.py --demo
从 Markdown 文件中提取所有 Mermaid 代码块，批量转换为图片：
cd ~/projects/flowchart-to-instagram
# 基本用法：转换所有 mermaid 代码块为图片
python scripts/md2images.py report.md
# 指定输出目录
python scripts/md2images.py report.md -o ./images/
# 指定文件名前缀
python scripts/md2images.py report.md --prefix fig_
# 更新 Markdown，替换代码块为图片链接
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
解析器特性：
A["标题\n描述"]（换行符 \n 分隔标题和描述）%% title: 和 %% watermark:A["🧪 氟化液"] → 图标渲染在标题上方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/ # 输出目录
--update 参数自动替换代码块为图片链接clip 强制裁剪到820px宽度--force-device-scale-factor=1 启动参数document.body.scrollHeight 获取真实内容高度analyze_hierarchical_structure 改用BFS链路追踪is_terminal_style布局只渲染title，忽略descEMOJI_KEYWORDS 字典：100+产业链关键词映射auto_match_emoji(title) 函数：无显式icon时自动添加parse_node_content() 返回前output/ 目录A["fas:mobile-alt 消费电子驱动\n手机+PC为主"]fa、fas（solid）、fab（brands）、far（regular）A["🧪 氟化液/硅基液"]EMOJI_KEYWORDS 字典：100+关键词映射（产业链专用）冷却液 → 🧪，AI → 🤖，服务器 → ️️，温控 → 🌡️auto_match_emoji(title) 在 parse_node_content() 中自动添加
icon_to_html() 函数：检测 : 决定是FA图标还是emoji\U00002702-\U000027B0 无法匹配 ⚙️（U+2699=9881 < U+2702=9986）\U00002600-\U000027BF 包含完整 Misc Symbols + Dingbats\U00002B50-\U00002B55 包含星星符号 ⭐\U0000FE00-\U0000FE0F 包含 Variation Selectors（文本符号变emoji的组合字符）\U0001F1E0-\U0001F1FF 包含 Flags（国旗等区域性符号）remove_emoji() 函数 unicode 范围 \U000024C2-\U0001F251 包含中文 CJK 字符区域
消费电子驱动 → +PC）-（如 90-95%）subgraph 上游["标题"]）
[A-Za-z0-9_]+ 只支持英文ID，改为 \S+ 支持任意非空白字符%%{init}%% 配置块，防止误解析字体设置（如 sans-serif）为节点
in_init_block 状态跟踪，跳过整个 init 配置块style 定义行，防止误解析样式配置findall 替代 search，正确解析连接行中的节点定义（如 C1 --> C4["标题"]）-
[-<>]+ 会误匹配 90-95%、500-1500元 中的 -[...]，再匹配明确连接符号 -{2,}>?、->、--min-height: 100vh，改用 padding-bottom: 20pxposition: absolute（非 fixed）覆盖内容区域已发布 GitHub: https://github.com/shinelp100/flowchart-to-instagram
版本迭代：
症状：Subgraph 数量为 0 或少于预期
原因：原正则 [A-Za-z0-9_]+ 只支持英文ID
解决：改为 \S+ 支持中文ID（如 上游、中游）
症状：节点数比预期多，出现奇怪节点名
原因：%%{init}%% 配置块中的字体设置被误解析
解决：添加 in_init_block 状态跟踪，跳过整个 init 配置块
症状：节点数少于预期，C1 --> C4["标题"] 中 C4 未识别
原因：原逻辑用 search 只匹配第一个节点定义
解决：改用 findall 匹配所有节点定义
症状：出现无关节点
原因：style A1 fill:#xxx 行被正则匹配
解决：添加 style 行过滤
-症状：节点数异常，如 90、95 被识别为连接节点
原因：原正则 [-<>]+ 匹配了 90-95%、500-1500元 中的 -
解决：预处理去除 [...] 内容，再匹配明确连接符号 -->、->、--
症状：节点内容中文消失，如 消费电子驱动\n手机+PC为主 → +PC
原因：remove_emoji() 正则 \U000024C2-\U0001F251 范围包含 CJK 字符区域
解决：移除该 unicode 范围，只保留精确的 emoji 区域
症状：生成PNG后找不到文件，或HTML写入错误目录
原因：脚本默认将HTML输出到输入文件同目录
解决：明确指定输出路径：
# 正确用法：第二个参数指定输出HTML路径
python scripts/parse_mermaid.py data/input.mmd output/input.html
node scripts/screenshot.mjs output/input.html output/input.png
症状：PNG宽度为1839px，内容变成宫格布局，仅在左上角显示
原因：Playwright在高DPI显示器上忽略deviceScaleFactor设置，fullPage模式放大截图
解决：修改 scripts/screenshot.mjs：
// 关键修复：使用clip强制裁剪 + 增大viewport高度
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 } // 强制820px宽度
});
v1.9更新：screenshot.mjs 已修复此问题，现默认输出正确820px宽度
格式：节点内容开头添加 fa:icon-name 或 fas:icon-name
示例：A["fas:server 液冷服务器\n整机柜方案"]
渲染：图标在标题上方，使用 Font Awesome 6.5.1 CDN