{"id":828,"date":"2026-06-20T02:33:55","date_gmt":"2026-06-20T02:33:55","guid":{"rendered":"https:\/\/www.vpascode.com\/pt\/?p=828"},"modified":"2026-07-30T06:23:25","modified_gmt":"2026-07-30T06:23:25","slug":"your-first-diagram-in-vpascode-a-5-minute-quickstart","status":"publish","type":"post","link":"https:\/\/www.vpascode.com\/pt\/your-first-diagram-in-vpascode-a-5-minute-quickstart\/","title":{"rendered":"Your First Diagram in VPasCode \u2013 A 5-Minute Quickstart"},"content":{"rendered":"
\n
\n

VPasCode is an intuitive diagram-as-code tool<\/a> and unified text to diagram<\/a> platform that lets you create diagrams using popular formats like PlantUML, Mermaid, and Graphviz.<\/p>\n<\/header>\n

\n

What is VPasCode?<\/h2>\n

VPasCode (Visual Paradigm’s diagram-as-code platform) is a unified text-to-diagram platform that lets you create diagrams using popular formats like PlantUML, Mermaid, and Graphviz. Whether you’re documenting software architecture, planning projects, or visualizing data flows, VPasCode provides a free code editor and instant diagram renderer to bring your ideas to life.<\/p>\n

The best part? You can start creating diagrams immediately at www.vpascode.com<\/a> \u2013 no registration required for basic features.<\/p>\n<\/section>\n

\n

Step 1: Access VPasCode<\/h2>\n

Navigate to www.vpascode.com<\/a> in your web browser. You’ll see a clean interface with a code editor on the left and a live preview panel on the right. The platform loads instantly with a sample diagram to help you understand the syntax.
\n<\/p>\n

\"VPasCode
VPasCode’s intuitive interface with side-by-side code editing and real-time preview<\/figcaption><\/figure>\n

Image Prompt:<\/strong> Screenshot of VPasCode web interface showing split-screen layout with code editor on left displaying Mermaid syntax and rendered flowchart on right, clean modern UI with toolbar at top<\/p>\n<\/section>\n

\n

Step 1: Write Your Flowchart Code<\/h2>\n

VPasCode serves as a versatile diagram-as-code tool supporting multiple formats. For this text to diagram quickstart, we\u2019ll use Mermaid, one of the most popular choices for flowcharts.<\/p>\n

Clear the sample code and paste this simple flowchart example:<\/p>\n

\r\n
\r\n Mermaid<\/span>\r\n \r\n <\/path><\/path><\/svg>\r\n Edit Mermaid in VPasCode<\/span>\r\n <\/a>\r\n <\/div>\r\n
\r\n 
graph TD\r\n    A[Start] --> B{Is it working?}\r\n    B -->|Yes| C[Great!]\r\n    B -->|No| D[Debug]\r\n    D --> B\r\n    C --> E[End]<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n
This Mermaid syntax creates a basic decision flowchart. Here’s what it means:<\/p>\n