Manusで任意のスキルを実行
ワンクリックで
ワンクリックで
ワンクリックでManusで任意のスキルを実行
始めるflowchart-to-instagram
将 Mermaid flowchart TD 或层级内容转换为 Instagram 风格信息图，适合微信公众号投放。解析结构而非简单渲染，设计层级递进的视觉卡片。
スター0
フォーク0
更新日2026年4月19日 15:38
SKILL.md
readonly
インストールコマンド
ダウンロード
役立つ用途SOC
メニュー
将 Mermaid flowchart TD 或层级内容转换为 Instagram 风格信息图，适合微信公众号投放。解析结构而非简单渲染，设计层级递进的视觉卡片。
| 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(255,230,240,0.92) → rgba(255,240,230,0.9)
自动解析 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