在 VPasCode 中绘制您的第一个图表——5 分钟快速入门

什么是 VPasCode？

VPasCode（Visual Paradigm 的图表即代码平台）是一个统一的文本到图表平台，让您能够使用 PlantUML、Mermaid 和 Graphviz 等流行格式创建图表。无论您是在记录软件架构、规划项目，还是可视化数据流，VPasCode 都提供免费的代码编辑器、实时渲染器和集成 AI，助您将想法变为现实。

最棒的是？您可以立即在www.vpascode.com开始创建图表——基础功能无需注册。如需全面了解最新的原生 AI 功能，请查看我们的VPasCode 重大更新公告.

步骤 1：访问 VPasCode

在浏览器中导航至www.vpascode.com。您将看到一个简洁的界面，左侧是代码编辑器，右侧是实时预览面板。该平台会立即加载，并附带一个示例图表，帮助您理解语法。

图像提示：VPasCode 网页界面的截图，展示分屏布局：左侧为代码编辑器，显示 Mermaid 语法；右侧为渲染后的流程图；界面简洁现代，顶部配有工具栏

步骤 2：创建您的图表（通过 AI 提示或代码）

VPasCode 是一款支持多种格式的 versatile 图表即代码工具。您有两种主要方式来构建图表：手动编写代码，或使用内置 AI 即时生成。

选项 A：使用原生 AI 即时生成

无需从零开始，您可以直接在应用界面中输入自然语言提示。例如，尝试输入：

“为 ATM 系统生成一个 PlantUML 用例图”

VPasCode 将在几秒钟内为您原生即时创建该图表。要查看此工作流程的实际演示，请观看我们的教程视频：在 YouTube 上观看：使用 AI 快速创建和编辑图表.

选项 B：手动编写流程图代码

或者，您可以手动编写或粘贴代码。清空编辑器，并使用以下简单的 Mermaid 流程图示例：

graph TD
    A[开始] --> B{是否正常工作？}
    B -->|是| C[太好了！]
    B -->|否| D[调试]
    D --> B
    C --> E[结束]

此 Mermaid 语法可创建一个基本的决策流程图。其含义如下：

• graph TD – 创建自上而下的图表
• A[开始] – 定义一个标记为“开始”的节点
• --> – 创建箭头连接
• B{是否正常工作？} – 创建决策菱形
• |是| 和 |否| – 决策路径的标签

图像提示：VPasCode 编辑器的特写视图，显示带有语法高亮的 Mermaid 流程图代码，光标位于代码区域，采用清晰的等宽字体

步骤 3：查看实时预览

当您输入或发出提示时，此“以代码形式呈现图表”的工具会立即在右侧渲染您的可视化效果。无需点击“编译”或“刷新”——实时文本转图表引擎会自动更新。

步骤 4：导出并分享您的图表

当您满意于您的图表后，您有多种选择：

导出为图像

点击“导出”按钮并选择您偏好的格式：

• SVG – 矢量格式，非常适合演示和文档（可缩放且无质量损失）
• PNG – 光栅图像格式，与所有应用程序兼容

通过 URL 分享

VPasCode 会为您的图表生成一个唯一 URL。只需从浏览器地址栏复制链接，并与同事分享。任何拥有该链接的人均可查看您的图表——无需账户。

额外功能：利用应用内 AI 能力

VPasCode 具备深度集成的 AI 功能。除了根据文本提示生成完整图表之外，例如“为 ATM 系统生成 PlantUML 用例图”，它还包含 AI 驱动的错误修复当解析器检测到语法错误时，只需点击“AI 修复”按钮即可修正代码并获得有用的解释。

AI 深入理解 PlantUML、Mermaid 和 Graphviz 语法，无论您是从头开始编写提示还是调试代码，都能提供无缝支持。

接下来做什么？

您刚刚探索了 VPasCode 的基础知识！以下是一些继续您旅程的建议：

• 探索不同的图表类型 – 尝试使用自然语言提示创建序列图、类图或 C4 模型
• 尝试其他格式 – 在 Mermaid、PlantUML 和 Graphviz 之间无缝切换
• 使用 AI 翻译 – 翻译您的图表标签为不同语言，并获得 AI 辅助
• 与文档集成 – 将您的图表发送至 Visual Paradigm OpenDocs以实现全面的文档记录

请记住，所有核心功能——图表编辑、实时渲染和导出——完全免费。高级 AI 功能需通过 Visual Paradigm Online Combo 版或带有活跃维护的 Visual Paradigm Desktop Professional 版获取。