Follow these steps to create beautiful Mermaid diagrams with custom styling.
1) Check Dependencies
This skill uses Mermaid.js and optionally Puppeteer for image generation.
CODEBLOCK0
2) Basic Diagram Generation
Create a simple Mermaid diagram:
CODEBLOCK1
3) Using Bundled Scripts
Use the bundled Python script for enhanced diagram generation:
CODEBLOCK2
Quick examples:
CODEBLOCK3
4) Custom Styling Options
The script supports:
- - Themes: default, forest, dark, neutral
- Background colors: Custom background colors
- Font styles: Custom font families and sizes
- Node styling: Custom shapes, colors, borders
- Edge styling: Custom line styles, colors, widths
Example with custom styling:
CODEBLOCK4
5) Diagram Types Supported
- 1. Flowchart: Flow diagrams, process flows
- Sequence: Sequence diagrams, UML sequence
- Gantt: Gantt charts, project timelines
- Class: Class diagrams, UML class
- State: State diagrams, state machines
- Entity Relationship: ER diagrams
- User Journey: User journey maps
- Pie: Pie charts
- Quadrant: Quadrant charts
- Requirement: Requirement diagrams
6) Advanced Features
- - Interactive diagrams: Generate HTML with interactive elements
- Multiple outputs: Generate PNG, SVG, PDF, HTML from same source
- Template system: Use predefined templates for common diagrams
- Auto-layout: Automatic layout optimization
- Export options: Multiple export formats and resolutions
7) Using mermaid-cli Directly
For advanced usage, use mermaid-cli directly:
CODEBLOCK5
8) Templates and Examples
Check the
examples/ directory for:
- - Common diagram templates
- Styling examples
- Configuration files
- Sample outputs
9) Quick Reference
- - Default theme: default
- Default format: PNG
- Default size: 800x600
- Auto-scaling: Enabled by default
- Background: White (#ffffff)
- Font: Arial, sans-serif
按照以下步骤创建具有自定义样式的精美Mermaid图表。
1) 检查依赖项
本技能使用Mermaid.js，并可选择使用Puppeteer生成图像。
bash
如需安装Node.js包
npm install -g @mermaid-js/mermaid-cli
2) 基本图表生成
创建一个简单的Mermaid图表：
bash
创建基本流程图
cat > diagram.mmd << EOF
flowchart TD
A[开始] --> B{决策}
B -->|是| C[操作1]
B -->|否| D[操作2]
C --> E[结束]
D --> E
EOF
生成PNG
mmdc -i diagram.mmd -o diagram.png
3) 使用捆绑脚本
使用捆绑的Python脚本增强图表生成功能：
bash
python3 skills/pretty-mermaid/scripts/mermaid-gen.py --help
快速示例：
bash
生成带主题的流程图
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
- 背景颜色：自定义背景颜色
- 字体样式：自定义字体系列和大小
- 节点样式：自定义形状、颜色、边框
- 边样式：自定义线条样式、颜色、宽度
自定义样式示例：
bash
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) 支持的图表类型
- 1. 流程图：流程图表、流程流转
- 序列图：序列图、UML序列
- 甘特图：甘特图、项目时间线
- 类图：类图、UML类
- 状态图：状态图、状态机
- 实体关系图：ER图
- 用户旅程图：用户旅程地图
- 饼图：饼状图
- 象限图：象限图表
- 需求图：需求图表
6) 高级功能
- - 交互式图表：生成带交互元素的HTML
- 多格式输出：从同一源生成PNG、SVG、PDF、HTML
- 模板系统：使用预定义模板创建常见图表
- 自动布局：自动优化布局
- 导出选项：多种导出格式和分辨率
7) 直接使用mermaid-cli
高级用法可直接使用mermaid-cli：
bash
生成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
8) 模板和示例
查看examples/目录获取：
9) 快速参考
- - 默认主题：default
- 默认格式：PNG
- 默认尺寸：800x600
- 自动缩放：默认启用
- 背景：白色（#ffffff）
- 字体：Arial, sans-serif
