我们非常激动地宣布对VPasCode：全面支持D2图表即代码语言！通过此次更新，架构师、开发者和技术写作者可以立即把声明式的 D2 文本脚本转换为清晰、专业的可视化图表，毫无障碍。
无论您是在规划复杂的云架构、微服务拓扑，还是组织工作流程，VPasCode 都是您首选的免费 D2 编辑器 以及功能丰富的在线 D2 工具。在浏览器内即可体验无缝、实时的可视化效果。
了解我们平台功能和更新详情，请访问官方VPasCode 页面.
VPasCode 中 D2 集成的工作原理
在 VPasCode 中使用 D2 快速、直观，旨在最大化您的工作效率。工作区采用便捷的并排布局：
- 左侧面板（代码编辑器）：只需粘贴、输入或编辑您的 D2 脚本。VPasCode 的自动格式检测会立即识别您的代码，无需手动切换语言。
- 右侧面板（实时可视化器）：在您输入或修改代码块时，实时观看图表动态渲染。
下方视频展示了如何在 Visual Paradigm VPasCode 图表即代码编辑器中创建 D2 图表。
准备好亲自尝试了吗？立即通过我们的VPasCode 编辑器.
D2 支持包含的关键功能
除了实时渲染外，我们的新 D2 集成还提供了多样化的协作和输出选项，以适应您的工作流程：
- 灵活的导出选项：可即时将完成的图表下载为可缩放的 SVG 向量图形或高分辨率 PNG 图像，适用于报告、演示文稿和文档。
- 剪贴板集成：只需单击一下，即可快速将渲染好的图表图像复制到剪贴板，直接粘贴到 Slack、电子邮件或文字处理器中。
- 即时链接分享：通过直接的超链接，轻松与同事或客户分享您的工作。最重要的是，查看者无需登录即可查看您分享的图表。
演示：在 D2 中构建基础网络图
要了解使用这个免费 D2 编辑器来建模系统有多么轻松，可以参考以下基础多层网络架构的示例。
D2 源代码
direction: right
client -> load_balancer: HTTPS
load_balancer -> app1: HTTP
load_balancer -> app2: HTTP
app1 -> redis: GET
app2 -> redis: GET
app1 -> postgres: SQL
app2 -> postgres: SQL
client.shape: person
load_balancer.shape: rectangle
app1.shape: hexagon
app2.shape: hexagon
redis.shape: cylinder
postgres.shape: cylinder
redis.style.fill: "#fee2e2"
postgres.style.fill: "#dcfce7"在我们的在线 D2 工具中如何呈现
当您将上述脚本粘贴到 VPasCode 中时，引擎会自动处理关系、方向性和自定义形状样式：
- 其中client被设计为一个独特的个人图标，发起 HTTPS 请求至一个矩形的load_balancer.
- 流量清晰地在两个六边形的应用节点（app1和app2).
- 两个应用节点均安全地查询后端缓存层（redis，以柔和的红色呈现）以及关系型数据存储（postgres，以柔和的绿色呈现）。
更多 D2 图表示例
基本形状
server -> client: HTTP
server -> db: 查询
client: {
shape: person
style.fill: "#cfe2ff"
}
db: {
shape: cylinder
style.fill: "#d1e7dd"
}
server.style.fill: "#fff3cd"
容器
network: {
web: {
shape: hexagon
style.fill: "#e7f1ff"
}
api: {
shape: rectangle
style.fill: "#fff3cd"
}
db.primary: {
shape: cylinder
style.fill: "#d1e7dd"
}
db.cache: {
shape: cylinder
style.fill: "#f8d7da"
}
web -> api: REST
api -> db.primary: SQL
api -> db.cache: 查找
}样式化
vars: {
d2-config: {
sketch: true
layout-engine: elk
}
}
aws: {
vpc: {
web: {
shape: rectangle
style: {
fill: "#fef3c7"
stroke: "#d97706"
stroke-width: 2
font: mono
}
}
api: {
shape: rectangle
style.fill: "#dbeafe"
}
db: {
shape: cylinder
style.fill: "#dcfce7"
}
}
}
user -> aws.vpc.web: HTTPS {
style.animated: true
}
aws.vpc.web -> aws.vpc.api: HTTP
aws.vpc.api -> aws.vpc.db: SQL {
style.stroke-dash: 5
}序列
shape: sequence_diagram
user -> api: GET /users
api -> db: SELECT *
db -> api: 数据行
api -> user: 200 OK
user -> api: POST /users
api -> db: INSERT
db -> api: 数据行
api -> user: 201 已创建备注：您可能希望使用 PlantUML 创建序列图。请查看如何操作：
什么是 VPasCode？
如果您是首次使用我们的平台，Visual Paradigm VPasCode是一款专为现代技术团队设计的统一、基于浏览器的代码化绘图解决方案。它通过允许您完全通过代码定义架构和数据模型，消除了手动拖拽绘图工具的繁琐操作。
除了 D2，VPasCode 还支持大量流行的绘图格式和结构化语言，包括 PlantUML、Mermaid、Graphviz，ECharts, SQL, YAML, JSON，以及像这样的主要编程语言Java, Python, Rust，以及TypeScript核心代码编辑、实时预览和图像导出完全免费。
立即开始创作
立即提升您的技术文档和架构建模。现在就启动应用程序，体验我们全新D2功能的速度与便捷。VPasCode 编辑器.