pretty-mermaid_内容创作 skill-PHP中文网

pretty-mermaid

Polar Sponsor

爱发电赞助

.NET 9.0

立即下载

使用自定义样式和主题生成精美的 Mermaid.js 图表。创建流程图、时序图、甘特图、类图等，支持增强功能。

遵循这些步骤, 用自定义的样式创建美丽的美人鱼图

功能概述

遵循这些步骤, 用自定义的样式创建美丽的美人鱼图是一项面向实际任务的技能，主要用于1. 1 检查依赖性；这种技能使用美人鱼. js 和可选的 Puppeteer 来生成图像；

核心要点

. 1. 2 基本图源。
它将相关步骤、工具调用和结果整理方式集中到统一流程中，帮助使用者更快完成目标并减少重复操作。
使用时应结合输入条件选择合适的执行方式，核对必要参数、依赖环境与输出内容，并按原始要求处理异常情况。

使用与执行

该技能适合需要稳定复用相关能力的场景，可作为自动化工作流的一部分，也便于后续检查、调整和扩展。从功能定位来看，该技能强调把分散的操作要求整理成清晰、可复用的处理流程，使用户能够围绕既定目标快速准备输入、选择执行方式并获得结构化结果。实际使用前应先确认任务范围、数据来源、运行环境、必要权限和关键参数，再依据技能说明逐步执行；

结果检查与注意事项

若输入条件不完整，应先补齐信息或采用保守配置，避免因错误假设导致结果偏离需求。执行过程中需要关注工具调用是否成功、接口或依赖是否可用、输出格式是否符合预期，并对异常提示、缺失字段和边界情况进行处理；涉及批量任务时，还应保存进度，避免中断后重复操作。

请按以下步骤创建具有自定义样式的精美 Mermaid 图表。

1) 检查依赖项

该技能使用 Mermaid.js，并可选 Puppeteer 生成图像。

# 如需，安装 Node.js 包
npm install -g @mermaid-js/mermaid-cli

2) 基础图表生成

创建一个简单的 Mermaid 图表：

# 创建基础流程图
cat > diagram.mmd << 'EOF'
flowchart TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Action 1]
    B -->|No| D[Action 2]
    C --> E[End]
    D --> E
EOF

# 生成 PNG
mmdc -i diagram.mmd -o diagram.png

3) 使用内置脚本

使用内置的 Python 脚本实现增强型图表生成：

python3 skills/pretty-mermaid/scripts/mermaid-gen.py --help

快速示例：

# 生成带主题的流程图
python3 skills/pretty-mermaid/scripts/mermaid-gen.py --type flowchart --output flowchart.png --theme forest

# 生成时序图
python3 skills/pretty-mermaid/scripts/mermaid-gen.py --type sequence --output sequence.png --theme dark

# 生成甘特图
python3 skills/pretty-mermaid/scripts/mermaid-gen.py --type gantt --output gantt.png --theme neutral

# 生成类图
python3 skills/pretty-mermaid/scripts/mermaid-gen.py --type class --output class.png --theme default

4) 自定义样式选项

该脚本支持以下功能：

主题：default、forest、dark、neutral
背景色：支持自定义背景颜色
字体样式：支持自定义字体族与字号
节点样式：支持自定义形状、颜色与边框
边样式：支持自定义线条样式、颜色与宽度

含自定义样式的示例：

python3 skills/pretty-mermaid/scripts/mermaid-gen.py 
  --type flowchart 
  --output custom.png 
  --theme custom 
  --background "#f8f9fa" 
  --font-family "Arial, sans-serif" 
  --node-color "#1a73e8" 
  --edge-color "#5f6368"

5) 支持的图表类型

Flowchart：流程图、业务流程图
Sequence：时序图（UML Sequence Diagram）
Gantt：甘特图、项目时间线
Class：类图（UML Class Diagram）
State：状态图、状态机图
Entity Relationship：实体关系图（ER Diagram）
User Journey：用户旅程图（User Journey Map）
Pie：饼图
Quadrant：象限图
Requirement：需求图

6) 高级功能

交互式图表：生成包含交互元素的 HTML
多格式输出：基于同一源文件生成 PNG、SVG、PDF 和 HTML
模板系统：为常用图表提供预定义模板
自动布局：自动优化图表布局
导出选项：支持多种导出格式与分辨率设置

7) 直接使用 mermaid-cli

如需高级用法，可直接调用 mermaid-cli：

# 生成 SVG
mmdc -i input.mmd -o output.svg -t forest -b transparent

# 生成 PDF
mmdc -i input.mmd -o output.pdf -t dark

# 使用自定义 CSS 生成
mmdc -i input.mmd -o output.png -C custom.css