Back to Details

figma-diagram-design

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Figma Diagram Design

Figma图表设计

Apply hierarchy-based color theming to diagrams. Each top-level branch gets a distinct color; all descendants inherit that color, creating instant visual grouping.
为图表应用基于层级的配色主题。每个顶层分支都会分配到独特的颜色，所有子节点继承该颜色，形成直观的视觉分组。

Color Application Rules

配色应用规则

  1. Identify top-level branches — nodes directly connected to the root/start
  2. Assign distinct colors — one color per top-level branch from the palette
  3. Inherit downward — all child nodes match their ancestor's branch color
  4. Root stays neutral — use the neutral color for entry points and shared nodes
  1. 识别顶层分支 —— 直接连接到根节点/起始点的节点
  2. 分配独特颜色 —— 从配色方案中为每个顶层分支分配一种专属颜色
  3. 向下继承 —— 所有子节点与所属祖先分支的颜色保持一致
  4. 根节点保持中性色 —— 入口点和共享节点使用中性色

Mermaid Styling Syntax

Mermaid样式语法

Define classes and apply them to nodes:
mermaid
flowchart LR
    classDef branch1 fill:#E8F4FD,stroke:#1E88E5,color:#1565C0
    classDef branch2 fill:#F3E5F5,stroke:#8E24AA,color:#6A1B9A
    classDef branch3 fill:#E8F5E9,stroke:#43A047,color:#2E7D32
    classDef neutral fill:#F5F5F5,stroke:#757575,color:#424242

    Start["Start"]:::neutral
    A["Branch A"]:::branch1
    A1["A Child"]:::branch1
    B["Branch B"]:::branch2
    B1["B Child"]:::branch2
    
    Start --> A --> A1
    Start --> B --> B1
定义类并将其应用到节点：
mermaid
flowchart LR
    classDef branch1 fill:#E8F4FD,stroke:#1E88E5,color:#1565C0
    classDef branch2 fill:#F3E5F5,stroke:#8E24AA,color:#6A1B9A
    classDef branch3 fill:#E8F5E9,stroke:#43A047,color:#2E7D32
    classDef neutral fill:#F5F5F5,stroke:#757575,color:#424242

    Start["Start"]:::neutral
    A["Branch A"]:::branch1
    A1["A Child"]:::branch1
    B["Branch B"]:::branch2
    B1["B Child"]:::branch2
    
    Start --> A --> A1
    Start --> B --> B1

Curated Palettes

精选配色方案

Modern Professional (Default)

现代专业风（默认）

BranchFillStrokeText
1 - Blue#E8F4FD#1E88E5#1565C0
2 - Purple#F3E5F5#8E24AA#6A1B9A
3 - Green#E8F5E9#43A047#2E7D32
4 - Orange#FFF3E0#FB8C00#E65100
5 - Teal#E0F2F1#00897B#00695C
6 - Red#FFEBEE#E53935#C62828
Neutral#F5F5F5#757575#424242
分支填充色描边色文字色
1 - 蓝色#E8F4FD#1E88E5#1565C0
2 - 紫色#F3E5F5#8E24AA#6A1B9A
3 - 绿色#E8F5E9#43A047#2E7D32
4 - 橙色#FFF3E0#FB8C00#E65100
5 - 蓝绿色#E0F2F1#00897B#00695C
6 - 红色#FFEBEE#E53935#C62828
中性色#F5F5F5#757575#424242

Soft Pastel

柔和马卡龙风

BranchFillStrokeText
1 - Rose#FCE4EC#F06292#C2185B
2 - Sky#E1F5FE#4FC3F7#0277BD
3 - Mint#E0F7FA#4DD0E1#00838F
4 - Peach#FFF8E1#FFD54F#F57F17
5 - Lavender#EDE7F6#B39DDB#5E35B1
6 - Sage#F1F8E9#AED581#558B2F
Neutral#FAFAFA#BDBDBD#616161
分支填充色描边色文字色
1 - 玫瑰色#FCE4EC#F06292#C2185B
2 - 天蓝色#E1F5FE#4FC3F7#0277BD
3 - 薄荷绿#E0F7FA#4DD0E1#00838F
4 - 桃色#FFF8E1#FFD54F#F57F17
5 - 薰衣草色#EDE7F6#B39DDB#5E35B1
6 - 鼠尾草绿#F1F8E9#AED581#558B2F
中性色#FAFAFA#BDBDBD#616161

Bold Vibrant

鲜明活力风

BranchFillStrokeText
1 - Electric Blue#BBDEFB#2196F3#0D47A1
2 - Hot Pink#F8BBD9#E91E63#880E4F
3 - Lime#DCEDC8#8BC34A#33691E
4 - Amber#FFECB3#FFC107#FF6F00
5 - Deep Purple#D1C4E9#673AB7#311B92
6 - Cyan#B2EBF2#00BCD4#006064
Neutral#ECEFF1#607D8B#37474F
分支填充色描边色文字色
1 - 电光蓝#BBDEFB#2196F3#0D47A1
2 - 亮粉色#F8BBD9#E91E63#880E4F
3 - 酸橙绿#DCEDC8#8BC34A#33691E
4 - 琥珀色#FFECB3#FFC107#FF6F00
5 - 深紫色#D1C4E9#673AB7#311B92
6 - 青色#B2EBF2#00BCD4#006064
中性色#ECEFF1#607D8B#37474F

Workflow

工作流程

  1. Parse the diagram structure to identify hierarchy
  2. Count top-level branches and select palette
  3. Generate classDef statements for each branch + neutral
  4. Apply classes to all nodes based on their branch ancestry
  5. Ensure root/shared nodes use neutral styling
  1. 解析图表结构以识别层级关系
  2. 统计顶层分支数量并选择配色方案
  3. 为每个分支及中性色生成classDef语句
  4. 根据节点所属的分支祖先为其应用对应样式
  5. 确保根节点/共享节点使用中性色样式

Presenting Diagram URLs

图表URL展示规范

Terminal display can corrupt long Figma URLs when copied. Follow these rules:
终端显示复制长Figma URL时可能会出现损坏。请遵循以下规则：

URL Presentation Rules

URL展示规则

  1. Provide the diagram ID separately — on its own line
  2. Use short URL form — omit 
    https://
    to reduce length
  3. Never use markdown links — 
    [text](url)
    can cause double-prefix issues
  4. Avoid query parameters — they add unnecessary length
  1. 单独提供图表ID —— 单独一行展示
  2. 使用短URL格式 —— 省略
    https://
    以缩短长度
  3. 请勿使用Markdown链接 —— 
    [text](url)
    格式可能会导致双前缀问题
  4. 避免查询参数 —— 它们会增加不必要的长度

Recommended Format

推荐格式

**Diagram ID:** b201b3c8-b2ab-4ed9-a3bc-7e09703db246

**Access your diagram at:**
figma.com/online-whiteboard/create-diagram/ + the ID above
**图表ID:** b201b3c8-b2ab-4ed9-a3bc-7e09703db246

**访问你的图表：**
figma.com/online-whiteboard/create-diagram/ + 上方的ID

If User Reports 404 Error

若用户反馈404错误

  1. Check for 
    %0A
    or 
    %20
    in their URL (indicates line break corruption)
  2. Provide the diagram ID separately
  3. Have them manually construct the short URL
  1. 检查他们的URL中是否包含
    %0A
    或
    %20
    （这表示换行符损坏）
  2. 单独提供图表ID
  3. 让他们手动拼接短URL

Notes

注意事项

  • For diagrams with >6 branches, cycle through the palette or select a subset
  • Gantt charts: color by task group/section rather than hierarchy
  • Sequence diagrams: color by participant/actor
  • State diagrams: color by state category or region
  • 对于分支数量>6的图表，可循环使用配色方案或选择部分颜色
  • 甘特图：按任务组/部分配色，而非层级
  • 时序图：按参与者/角色配色
  • 状态图：按状态类别或区域配色