60秒VPasCode快速入门指南

开始使用Visual Paradigm VPasCode不到一分钟即可开始。由于该平台完全基于云原生，您无需安装Java运行时、配置Node.js模块或下载大型IDE扩展依赖。您只需三步简单操作，即可从原始文本语法生成高保真视觉图表。

跟随此快速入门指南，创建、自定义并分享您的第一个Diagram-as-Code（DaC）资产。

步骤1：打开实时编辑器

在您的浏览器中访问免费的VPasCode沙盒。默认情况下，您将看到一个现代化的双面板界面：

• 左侧面板（代码编辑器）： 一个轻量级、高性能的文本编辑器，配备自动语法高亮、行号显示和实时错误检测功能。
• 右侧面板（实时预览窗口）： 一个实时图表渲染器，当您输入或修改文本表示时，会自动更新您的视觉布局。

步骤2：选择您的引擎并粘贴蓝图

VPasCode会自动识别您的语法。要查看其实际效果，请清除左侧面板中的任何占位符文本，然后将以下基线示例之一复制粘贴到编辑器中：

选项A：Markdown流程图（Mermaid语法）

如果您更喜欢敏捷的自上而下的流程图布局，请使用此简单块：

graph TD
    A[客户端请求] --> B{API网关}
    B --> |有效令牌| C[认证服务]
    B --> |无效令牌| D[访问被拒绝]
    C --> E[(用户数据库)]

选项B：软件架构组件（PlantUML语法）

如果您希望使用正式的边界框来映射结构化的系统组件，请使用此块：

@startuml
package "应用层" {
    [Web应用] -right-> [API网关]
}
database "数据存储" {
    [API网关] --> [SQL主库]
    [API网关] ..> [Redis缓存] : "读取优化"
}
@enduml

您粘贴代码的瞬间，右侧面板将立即编译您的文本，并显示清晰、完全对齐的视觉图表。

步骤3：导出并分享您的作品

当您对布局满意后，可以使用界面顶部的工作区控制栏立即导出或分享您的文档：

1. 复制可分享的链接： 点击 分享 按钮以生成即时链接。VPasCode 使用零数据库状态序列化，意味着您的整个图表文本会被安全地直接压缩到 URL 哈希中。任何点击您链接的人都可以立即查看和编辑完全相同的代码模型。
2. 下载高分辨率矢量图（SVG）： 点击 导出 SVG 按钮以下载可缩放的矢量资源。这非常适合在 Git 仓库、团队维基或内部工程 Markdown 文档文件中进行干净的嵌入。
3. 下载静态图像（PNG）： 点击 导出 PNG 以获取高分辨率快照，可直接插入 Slack、Microsoft Teams 或设计演示文稿中。

现在您已经渲染了第一个资源，探索我们文档的下一部分，以掌握以下各项设计方法：PlantUML 操作手册, Mermaid 操作手册，以及Graphviz 操作手册 设计方法！