Your First Diagram in VPasCode – A 5-Minute Quickstart

What is VPasCode?

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.

The best part? You can start creating diagrams immediately at www.vpascode.com – no registration required for basic features.

Step 1: Access VPasCode

Navigate to www.vpascode.com 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.

Image Prompt: 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

Step 1: Write Your Flowchart Code

VPasCode supports multiple diagram-as-code formats. For this quickstart, we’ll use Mermaid, one of the most popular choices for flowcharts.

Clear the sample code and paste this simple flowchart example:

graph TD
    A[Start] --> B{Is it working?}
    B -->|Yes| C[Great!]
    B -->|No| D[Debug]
    D --> B
    C --> E[End]

This Mermaid syntax creates a basic decision flowchart. Here’s what it means:

• graph TD – Creates a top-down graph
• A[Start] – Defines a node labeled “Start”
• --> – Creates an arrow connection
• B{Is it working?} – Creates a decision diamond
• |Yes| and |No| – Labels for the decision paths

Image Prompt: Close-up of VPasCode editor showing Mermaid flowchart code with syntax highlighting, cursor positioned in code area, clean monospace font

Step 2: View Real-Time Preview

As you type, VPasCode instantly renders your diagram on the right side. No need to click “compile” or “refresh” – the preview updates automatically with every keystroke. This real-time feedback helps you catch syntax errors immediately and see your diagram take shape.

Step 3: Export and Share Your Diagram

Once you’re satisfied with your flowchart, you have several options:

Export as Image

Click the “Export” button and choose your preferred format:

• SVG – Vector format perfect for presentations and documentation (scalable without quality loss)
• PNG – Raster image format compatible with all applications

Share via URL

VPasCode generates a unique URL for your diagram. Simply copy the link from your browser’s address bar and share it with colleagues. Anyone with the link can view your diagram – no account required.

Bonus: Fix Errors with AI

Made a syntax mistake? No worries. VPasCode includes AI-powered error fixing. When the parser detects an error, simply click the “Fix by AI” button. The AI will not only correct your code but also explain what was wrong, helping you learn the syntax as you go.

This feature is particularly helpful when you’re new to diagram-as-code formats or working with complex diagrams. The AI understands PlantUML, Mermaid, and Graphviz syntax deeply, providing accurate fixes and clear explanations.

What’s Next?

You’ve just created your first diagram in VPasCode! Here are some ideas to continue your journey:

• Explore different diagram types – Try creating sequence diagrams, class diagrams, or Gantt charts
• Experiment with other formats – Switch between Mermaid, PlantUML, and Graphviz to find your favorite
• Use AI translation – Translate your diagram labels into different languages with AI assistance
• Integrate with documentation – Send your diagrams to Visual Paradigm OpenDocs for comprehensive documentation

Remember, all core features – diagram editing, live rendering, and exporting – are completely free. Advanced features like AI error fixing and AI translation are available with Visual Paradigm Online Combo Edition or Visual Paradigm Desktop Professional Edition with active maintenance.