d2

Name: d2
Author: itsjool

github.com/itsjool开发040 次安装28 周前更新

代码仓库

关于 d2

用于编写 D2 图表代码并指导分阶段制图的技能：从选择图表类型，到检查文本预览，再到确认后渲染 SVG。适合制作架构、流程、数据等图表。

主要功能

01图表类型选择指南
02D2 语法与样式参考
03检查结果并绘制 ASCII 预览
04确认后渲染 SVG
05架构、流程、ER 和 UML 模式

适用场景

01草拟系统架构图
02梳理流程或请求时序
03建模数据库表或类关系
04准备图表并输出 SVG

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/itsjool/d2-mcp --skill d2

安装后在 Claude Code 中输入/d2确认已加载。

详细介绍

D2 图表语言

D2 是一种声明式图表脚本语言，可编译为 SVG。文本 → 图表。文档：https://d2lang.com | 交互式编辑器：https://play.d2lang.com

图表类型选择

编写代码前，先选择合适的图表类型：

用户想展示……	使用此 D2 模式
系统组件及其连接方式	容器 + 连接（架构图）
请求/响应流程、API 交互、消息顺序	`shape: sequence_diagram`
流程、算法或决策树	形状 + 有向连接（流程图）
数据库表和外键	`shape: sql_table`（ER 图）
类层次结构、对象关系	`shape: class`（UML 类图）
系统上下文：用户、系统、边界（C4）	容器 + `shape: c4-person` + 主题 303
状态机或生命周期	形状 + 带标签的连接（状态图）
渐进式展示 / 叙事	使用 `steps: {}` 和 animate_interval
同一系统的多个视图	`layers: {}` 或 `scenarios: {}`
仪表板 / 指标网格	使用 `grid-rows` / `grid-columns` 的容器

默认形状： rectangle。使用 direction: right 或 direction: down 控制流程方向。

工作流：响应图表请求

选择图表类型（使用上表）
起草 D2 代码——从核心实体开始，添加连接，最后添加样式

调用 d2_inspect，然后根据其输出绘制 ASCII 副本：

d2_inspect(d2_code=...)

使用检查输出，通过框线字符（┌─┐│└┘├┤┬┴┼ ▶ ◀ ↓ ↑）手工绘制清晰的 ASCII 图表。此 ASCII 图表由你生成，而不是由 D2 渲染器生成。这样可以避开 D2 已知的所有 ASCII 渲染问题（跨容器连接、反向边、direction:right）。

绘制方法：

容器绘制为带标签的方框：┌─ Control Plane ──────┐
子形状缩进放在父方框内
在方框之间绘制连接箭头，并标注标签
跨容器连接绘制为跨越方框的箭头
正向使用 →，反向使用 ←，双向使用 ↔，无向使用 --
对于时序图：将参与者绘制为列，并在其间绘制箭头
对于步骤/图层：将每个画板展示为单独的区域

将结果放在代码围栏中，并询问用户结构是否正确：

Here's the structure:

┌─ SaaS Cloud ─────────────────────────────┐
│  ┌──────────────────┐                    │
│  │  Control Plane   │                    │
│  │  ┌─────────────┐ │                    │
│  │  │ API Gateway │ │                    │
│  │  └──────┬──────┘ │                    │
│  │       route      │                    │
│  │  ┌──────▼──────┐ │                    │
│  │  │ gRPC Server │ │                    │
│  │  └──────┬──────┘ │                    │
│  └─────────┼────────┘                    │
└────────────┼────────────────────────────-┘
             │ mirror request →
┌─ Customer Edge ──────────────────────────┐
│  ┌──────────────────┐                    │
│  │  Data Plane Agent│                    │
│  │  ┌─────────────┐ │                    │
│  │  │ gRPC Client │ │                    │
│  │  └─────────────┘ │                    │
│  └──────────────────┘                    │
└──────────────────────────────────────────┘

Does this look right? I'll render the SVG if so.

规则：

始终先调用 d2_inspect——根据其输出绘制，不要凭记忆绘制
不要使用 d2_render(ascii=true)——D2 的 ASCII 渲染器存在已知问题
不要跳过预览，直接生成 SVG
如果用户要求修改，更新 D2 代码、重新检查并重新绘制

仅在用户确认结构后，才渲染 SVG： d2_render(d2_code=..., skip_fonts=true)
**如果任一步骤无效，**调用 d2_validate 获取具体的行/列错误
**保存时：**先写入 .d2 源文件（即时完成），最后渲染 SVG（参见保存渲染后的 SVG）
迭代——根据反馈调整，重新渲染 ASCII 以确认，然后生成 SVG

规则：skip_fonts 默认值为 true——除非用户明确要求嵌入字体，否则绝不要覆盖此设置。实际上，系统字体与 Source Sans Pro 无法区分；跳过字体可将渲染时间缩短，并将 SVG 大小减少约 500KB。

核心语法

形状

# Bare identifier = rectangle by default
server

# With a display label (key vs label — connections use the KEY, not the label)
server: "API Server"

# Set shape type
db: {
  shape: cylinder
}

# Multiple on one line
web; app; db

# Inline style shorthand
cache: { shape: queue; style.fill: "#fce8e6" }

可用形状类型： rectangle（默认）、square、circle、oval、diamond、hexagon、cloud、 cylinder、queue、package、parallelogram、document、page、step、 callout、stored_data、person、c4-person、 sql_table、class、sequence_diagram、image

连接

A -> B            # directed arrow
A <- B            # reverse
A -- B            # undirected line
A <-> B           # bidirectional

A -> B: label     # with label

# Chaining
A -> B -> C -> D

# Multiple connections (creates SEPARATE arrows — D2 never merges them)
A -> B: "first"
A -> B: "second"   # distinct second arrow, not an override

# Reference a specific connection (0-indexed) to style it
(A -> B)[0].style.stroke: red

容器（嵌套）

cloud: {
  label: "AWS"
  vpc: {
    web: "Web Tier"
    app: "App Tier"
    web -> app
  }
}

# Cross-container connections: use _ to refer to the parent scope
cloud: {
  aws: {
    db
    db -> _.gcloud.backup    # _ = parent scope (cloud)
  }
  gcloud: {
    backup
  }
}

文本和 Markdown

explanation: |md
  ## Architecture Overview
  This diagram shows the **three-tier** architecture.
  - Web tier
  - App tier
  - Data tier
|

formula: |latex
  \frac{\partial f}{\partial x} = 2x
|

样式参考

形状样式

my_shape: {
  style: {
    fill: "#4a90d9"          # background color
    stroke: "#2c5f8a"        # border color
    stroke-width: 2
    stroke-dash: 5           # dashed border
    border-radius: 8         # rounded corners
    font-size: 14
    font-color: white
    opacity: 0.9
    shadow: true
    bold: true
    italic: false
    3d: true                 # rectangles/squares only
    multiple: true           # stacked visual — implies "many instances"
    double-border: true      # rectangles and ovals only
    text-transform: uppercase
  }
}

连接样式

A -> B: {
  style: {
    stroke: red
    stroke-width: 3
    stroke-dash: 5
    animated: true           # flowing animation — use to show data/request flow
    bold: true
    font-color: "#666"
  }
}

箭头

A -> B: {
  source-arrowhead: {
    shape: diamond
    style.filled: true
  }
  target-arrowhead: {
    shape: circle
  }
}

箭头形状：triangle（默认）、arrow、diamond、circle、box、 cf-one、cf-many、cf-one-required、cf-many-required、cross

在 ER 连接上使用 cf-* 箭头，以显示基数（乌鸦脚表示法）。

高级样式

使用 glob 设置全局样式

# Style all shapes
*.style.fill: "#f0f4ff"
*.style.stroke: "#3b5bdb"
*.style.border-radius: 6

# Style all connections
(* -> *)[*].style.stroke: "#888"
(* -> *)[*].style.animated: true

# Scoped glob — only shapes inside this container
cloud: {
  *.style.fill: "#e8f5e9"
}

可复用的样式类

classes: {
  important: {
    style: { stroke: red; stroke-width: 3; bold: true }
  }
  faded: {
    style: { opacity: 0.4 }
  }
  external: {
    style: { stroke-dash: 5; fill: "#f8f8f8" }
  }
}

# Apply to shapes
critical_db.class: important
legacy_service.class: faded

# Apply multiple (left-to-right, later class wins on conflicts)
service.class: [important; faded]

# Apply to connections
A -> B: { class: important }

变量与替换

vars: {
  primary: "#3b5bdb"
  secondary: "#74c0fc"
  accent: "#f06595"

  # In-file config (overridden by d2_render tool params)
  d2-config: {
    theme-id: 0
    theme-overrides: {
      B1: "#0057b8"   # brand primary — maps to the main accent color
      N7: "#1a1a2e"   # darkest neutral
    }
  }
}

server: {
  style.fill: ${primary}
  style.stroke: ${secondary}
}

颜色覆盖代码：N1–N7（中性色）、B1–B6（品牌色）、AA2–AA5（强调色 A）、AB4–AB5（强调色 B）

图表模式

架构／系统

*.style.border-radius: 6
*.style.font-size: 13
direction: right

internet: { shape: cloud; label: "Internet" }

frontend: {
  label: "Frontend\n(React)"
  icon: https://icons.terrastruct.com/dev/react.svg
  style.fill: "#e8f4fd"
}

api: { label: "API Gateway"; style.fill: "#fff3cd" }

services: {
  label: "Microservices"
  style.fill: "#f8f9fa"

  auth: "Auth Service"
  orders: "Orders Service"
  payments: "Payments Service"
}

db: { shape: cylinder; label: "PostgreSQL"; style.fill: "#d4edda" }
cache: { shape: queue; label: "Redis"; style.fill: "#fce8e6" }

internet -> frontend
frontend -> api: "HTTPS"
api -> services.auth: "JWT validate"
api -> services.orders
api -> services.payments
services.orders -> db
services.payments -> db
services.auth -> cache: "session"

流程图／流程

direction: down

start: { shape: circle; style.fill: "#4caf50"; style.font-color: white }
end_ok: { shape: circle; style.fill: "#4caf50"; style.font-color: white; label: "Done" }
end_err: { shape: circle; style.fill: "#f44336"; style.font-color: white; label: "Failed" }
validate: { shape: diamond; label: "Valid?" }
process: "Process Request"
notify: "Send Notification"
error: "Return Error"

start -> process
process -> validate
validate -> notify: "Yes"
validate -> error: "No"
notify -> end_ok
error -> end_err

时序图

auth_flow: {
  shape: sequence_diagram

  # Declare actors in display order
  client
  gateway
  auth
  db

  client -> gateway: "POST /login"
  gateway -> auth: "validate(credentials)"
  auth -> db: "SELECT user WHERE email=?"
  db -> auth: "user record"

  # Note on a specific actor (no connections = annotation)
  auth."checks bcrypt hash"

  auth -> gateway: "JWT token"
  gateway -> client: "200 OK + token"

  # Group / fragment
  error_case: {
    gateway -> client: "401 Unauthorized"
  }
}

时序图的关键规则：

首次引用时会自动创建参与者；显式声明参与者可控制顺序
图表中没有连接的独立形状是注释／标注
分组（命名的嵌套区块）会创建 UML 片段框

ER 图（SQL 表）

users: {
  shape: sql_table
  id: uuid {constraint: primary_key}
  email: varchar(255) {constraint: [unique; not_null]}
  name: varchar(100)
  org_id: uuid {constraint: foreign_key}
  created_at: timestamptz
}

organizations: {
  shape: sql_table
  id: uuid {constraint: primary_key}
  name: varchar(255) {constraint: not_null}
}

posts: {
  shape: sql_table
  id: uuid {constraint: primary_key}
  author_id: uuid {constraint: foreign_key}
  title: varchar(255)
  body: text
}

# FK connections — connect column to column
users.org_id -> organizations.id
posts.author_id -> users.id

SQL 表备注：

stroke 设置表体样式；fill 设置表头行样式
约束：primary_key、foreign_key、unique、not_null
多个约束：{constraint: [primary_key; not_null]}

UML 类图

UserService: {
  shape: class

  # Fields: visibility + name: type
  # Quote the key if params contain ":", quote the value if it contains "[]"
  -db: Database
  "-users": "User[]"
  "#cache": Cache

  # Methods: visibility + name(params): return
  +getUser(): User
  "+createUser(data: UserInput)": User
  "-validateEmail(email: string)": bool
}

User: {
  shape: class
  +id: string
  +email: string
  +name: string
  +createdAt: Date
}

# Relationships as connections with labels
UserService -> User: uses
UserRepo -> User: manages

可见性：+ 公有、- 私有、# 受保护

引号规则：

字段类型包含 [] → 为值加引号："-users": "User[]"
方法参数包含 : → 为键加引号："+method(id: string)": ReturnType

C4 架构

C4 图请使用主题 303（C4）——该主题会为容器设置经典的 C4 风格。

# Render with: theme_id=303
direction: right

vars: {
  d2-config: {
    theme-id: 303
  }
}

# Actors
user: {
  shape: c4-person
  label: "Customer"
  style.fill: "#08427b"
  style.font-color: white
}

# Systems
web_app: {
  label: "Web Application\n[React SPA]"
  style.fill: "#1168bd"
  style.font-color: white
}

api: {
  label: "API Server\n[Node.js / Express]"
  style.fill: "#1168bd"
  style.font-color: white
}

db: {
  shape: cylinder
  label: "Database\n[PostgreSQL]"
  style.fill: "#1168bd"
  style.font-color: white
}

external_payment: {
  label: "Payment Gateway\n[Stripe]"
  style.fill: "#999999"
  style.font-color: white
}

user -> web_app: "Uses [HTTPS]"
web_app -> api: "API calls [JSON/HTTPS]"
api -> db: "Reads/writes [SQL]"
api -> external_payment: "Charges card [HTTPS]"

状态机

direction: right

# States
idle: { shape: rectangle; label: "Idle" }
loading: { shape: rectangle; label: "Loading"; style.fill: "#fff3cd" }
success: { shape: rectangle; label: "Success"; style.fill: "#d4edda" }
error: { shape: rectangle; label: "Error"; style.fill: "#f8d7da" }

# Terminal states with double-border
success: { style.double-border: true }

# Transitions
idle -> loading: "fetch()"
loading -> success: "onSuccess"
loading -> error: "onError"
error -> idle: "reset()"
success -> idle: "reset()"

网格仪表板

dashboard: {
  label: "System Health"
  grid-rows: 2
  grid-columns: 3
  grid-gap: 16

  cpu: { label: "CPU\n42%" }
  memory: { label: "Memory\n71%" }
  disk: { label: "Disk\n28%" }
  latency: { label: "p99 Latency\n180ms"; style.fill: "#fff3cd" }
  errors: { label: "Error Rate\n0.2%"; style.fill: "#d4edda" }
  uptime: { label: "Uptime\n99.97%"; style.fill: "#d4edda" }
}

动画多步骤图表

使用 steps 逐步构建图表。使用 animate_interval 渲染可生成动画 SVG。

steps: {
  s1: {
    user: "User"
  }
  s2: {
    user: "User"
    web: "Web Server"
    user -> web: "request"
  }
  s3: {
    user: "User"
    web: "Web Server"
    db: "Database"
    user -> web: "request"
    web -> db: "query"
  }
  s4: {
    user: "User"
    web: "Web Server"
    db: "Database"
    cache: "Redis"
    user -> web: "request"
    web -> db: "query"
    web -> cache: "cache hit"
  }
}

渲染：d2_render(d2_code=..., animate_interval=1500, target="*")

每个步骤都会继承上一步的内容。使用 scenarios 基于基础图表创建不同变体；使用 layers 创建完全独立的视图。

主题

按场景推荐

场景	推荐主题	ID
技术文档、通用场景	Neutral Default	0
C4 架构图	C4	303
深色模式文档	Dark Mauve	200
鲜艳／多彩风格	Flagship Terrastruct	3
纸张／白板风格	Origami	302
终端／等宽字体风格	Terminal	300
无障碍／色盲友好	Colorblind Clear	8
演示文稿（高对比度）	Neutral Default 或 Flagship	0 或 3

为每张图表设置浅色／深色模式

D2 支持在同一个 SVG 中为浏览器浅色和深色模式分别设置主题：

d2_render(d2_code=..., theme_id=0, dark_theme_id=200)

浏览器会根据 prefers-color-scheme 自动切换。在文档网站中嵌入 SVG 时请使用此功能。

完整主题表

ID	名称	特点
0	中性默认	简洁、专业（推荐默认使用）
1	中性灰	柔和、单色
3	Terrastruct 旗舰主题	鲜明、多彩
4	清爽经典	蓝色和绿色
5	混合莓果蓝	紫色和蓝色
6	葡萄汽水	以紫色为主
7	茄紫	深紫色调
8	色盲友好	易于识别的配色方案
100	香草硝基可乐	暖中性色
101	橙味冰沙	橙色点缀
102	雪莉坦普尔	粉色和红色
103	大地色调	棕色和褐黄色
104	常绿绿地	森林绿
105	黄油吐司	暖黄色
200	暗紫灰	深色模式
201	深色 Terrastruct 旗舰主题	深色模式，多彩
300	终端	等宽字体，点填充容器
301	终端灰度	终端风格，灰度
302	折纸	纸张美学
303	C4	C4 架构图风格

布局

引擎	使用时机	备注
dagre	始终使用——默认	速度快，能很好地处理嵌套和跨容器连接
elk	用户明确要求时	在 WASM 中速度极慢（可能需要几分钟）。不要自行选择。

默认规则：绝不设置 layout-engine。 Dagre 是默认布局引擎。只有用户要求时才设置 ELK。

方向控制：

direction: right    # top-level: up, down, left, right

# Per-container direction (ELK only — do not use unless user requests ELK)
container: {
  direction: right
  a -> b -> c
}

组合：图层、场景、步骤

# Layers: independent views (no inheritance between layers)
layers: {
  overview: {
    web -> app -> db
  }
  detailed: {
    web: "Nginx" { shape: rectangle }
    web -> app: "HTTP/1.1"
    app -> db: "PostgreSQL wire protocol"
  }
}

# Scenarios: variations on a base diagram (inherit from root)
web -> app -> db

scenarios: {
  with_cache: {
    app -> cache: "read-through"
  }
  with_cdn: {
    cdn -> web
  }
}

# Steps: sequential, each step inherits the previous (use for animated storytelling)
steps: {
  s1: { user }
  s2: { user -> web }
  s3: { user -> web -> app }
  s4: { user -> web -> app -> db }
}

为图层／场景／步骤添加动画：d2_render(d2_code=..., animate_interval=1500, target="*") 渲染单个画板：使用 target="layers.production"，或使用 target="layers.production.*" 渲染该画板及其子项。

图标

# Icon from URL — Terrastruct's free icon library
server: {
  icon: https://icons.terrastruct.com/tech/server.svg
}

# Control icon position
server: {
  icon: https://icons.terrastruct.com/tech/server.svg
  icon.near: top-left    # top-left, top-center, top-right, center-left, center-right, bottom-*
}

# Standalone image shape
github: {
  shape: image
  icon: https://icons.terrastruct.com/social/github.svg
}

免费图标：https://icons.terrastruct.com — 包含 AWS、GCP、Azure、开发工具和科技品牌标志。

工具提示和链接

server: {
  tooltip: "Handles all API requests. SLA: 99.9%"
  link: https://docs.example.com/server
}

server -> db: {
  tooltip: "Uses PgBouncer connection pooling"
}

工具提示和链接嵌入在 SVG 中，在浏览器中打开时可正常使用。若要强制渲染工具提示附录，即使形状没有工具提示也一样，请在渲染选项中添加 forceAppendix: true（d2_render 工具目前尚未提供此选项——可使用文件内配置，或省略）。

网格布局

dashboard: {
  grid-rows: 2
  grid-columns: 3
  grid-gap: 20           # gap between all cells
  vertical-gap: 10       # fine-tune vertical spacing
  horizontal-gap: 15     # fine-tune horizontal spacing

  widget_a: "Revenue"
  widget_b: "Users"
  widget_c: "Orders"
  widget_d: "Latency"
  widget_e: "Errors"
  widget_f: "Uptime"
}

形状按从左到右、从上到下的顺序填充单元格
网格项目之间的连接仍会正常渲染
网格容器上的 width／height 需要使用 ELK 布局

导入

# Spread file contents into current scope
...@shared_styles.d2

# Assign file to a key
network: @network_diagram.d2

# Import specific object from file
db_schema: @schema.users

保存已渲染的 SVG

按此顺序保存——先写源文件，再写 SVG：

步骤 1 — 立即写入 D2 源文件（无需渲染，即时完成）：使用 Write 工具将 D2 代码写入 diagrams/<stem>.d2。

步骤 2 — 重用对话中渲染的 SVG： 之前使用 skip_fonts=true（默认值）渲染的 SVG 就是适合保存的输出。将其写入 diagrams/<stem>.svg。无需再次渲染。

嵌入字体： 对于保存的文件，skip_fonts=true 也是默认值且正确——实际使用中，系统字体与 Source Sans Pro 几乎没有区别。只有在用户明确要求嵌入字体时，才使用 skip_fonts=false 渲染，并提醒他们这会增加约 500KB 的文件大小，且耗时会显著增加。

文件名约定：

目录：相对于项目根目录的 diagrams/（如果不存在则创建）
文件名主体：YYYY-MM-DD_HH-MM_<slug>——本地时间，24 小时制，2–4 个词的 slug
示例：2025-06-01_14-32_auth-flow-sequence、2025-06-01_09-05_aws-three-tier

保存后，告知用户文件路径。SVG 可在任何浏览器中打开，并且完全交互（工具提示、链接、动画）。

嵌入 HTML 时： 添加 no_xml_tag=true 以省略 <?xml?> 声明。

D2 的强大之处（与 Mermaid 相比）

以下是 D2 能实现而 Mermaid 无法实现的功能——适合时可优先使用：

跨容器连接——使用 _ 表示父级作用域，连接不同容器内的形状：aws.db -> _.gcloud.replica
动画连接——style.animated: true 会在 SVG 中创建流动箭头（非常适合展示数据流）
多画板动画 SVG——steps/scenarios/layers + animate_interval 可生成一张在不同状态间循环切换的 SVG
原生浅色／深色模式——d2_render(theme_id=0, dark_theme_id=200)——浏览器会自动切换
使用变量设置品牌主题——在 vars 中定义品牌颜色，然后在各处引用 ${primary}
可复用的样式类——定义一次 .class 样式，然后像 CSS 类一样应用到多个形状
网格布局——使用纯 D2 创建仪表板式网格布局
图标库——直接从 icons.terrastruct.com 将 SVG 图标添加到形状中
工具提示附录——在 SVG 中嵌入带链接的悬停工具提示，无需 JavaScript

质量指南

先搭建结构，最后添加样式——先确保形状和连接正确，再考虑颜色
保持图表聚焦——尽量控制在 40 个节点以内；将复杂系统拆分成多个图表
一个概念对应一张图表——对于同一系统，架构图和时序图比试图同时展示两者的单张图表更有用
优先使用容器而非扁平图——嵌套是 D2 的优势；用它对相关组件分组
在连接上使用 style.animated: true 展示活跃的数据流——这比单靠颜色更有信息量
与用户迭代——渲染、展示，然后询问“这是否表达了你的意思？”，再进行调整
如果不确定语法，先运行 d2_validate，再运行 d2_render——它会返回具体的行／列错误

常见错误

不要使用 d2_render(ascii=true) 生成结构预览： D2 ASCII 渲染器（在 v0.7.1 中新增）存在已知错误：direction: right 配合跨容器连接会导致输出混乱；反向箭头（回复、响应）即使使用 direction: down 也会产生杂乱的路由。Terrastruct 已承认这种做法在架构上存在缺陷，目前正在重写。

请改用 d2_inspect——它会根据编译后的图表对象生成可靠的文本摘要，无需进行渲染。

重复的连接不会合并：

A -> B: "label 1"
A -> B: "label 2"   # creates a SECOND distinct arrow, not an update

使用 (A -> B)[0].label: "label 1" 引用已有连接。

_ 是父级作用域，不是根作用域：

outer: {
  inner: {
    x -> _.y    # _ refers to outer, not root
  }
  y
}

引用类方法的参数：

# WRONG — colon inside key breaks parsing
+createUser(data: UserInput): User

# CORRECT — quote the key when params contain ":"
"+createUser(data: UserInput)": User

WASM 中的 ELK 速度极慢： 除非用户明确要求，否则切勿在 vars.d2-config 中设置 layout-engine: elk，也不要向 d2_render 传递 layout: "elk"。每次渲染可能需要数分钟。

容器上的 width/height 需要 ELK： grid-rows/grid-columns 可与 dagre 配合使用，但容器上显式设置的 width/height 只有在使用 ELK 布局时才会生效。

连接使用键，而非标签：

server: "API Server"   # label is "API Server", key is "server"
server -> db            # correct — uses the key
"API Server" -> db      # WRONG — this creates a new shape named "API Server"

在对话中默认设置 skip_fonts=true： 在对话中渲染以供显示时，始终传递 skip_fonts=true。仅在将最终 SVG 保存到磁盘时才省略此参数（即使用 skip_fonts=false）。每次渲染时若未设置 skip_fonts=true，都会向上下文添加约 500KB 的 base64 字体数据。

支持 Markdown

登录后评论

基本信息

作者: itsjool
仓库: itsjool/d2-mcp
分类: 开发
安装次数: 40
GitHub Stars: 0

报告问题