Documentation

Everything you need to know to master NeuralUML Studio.

# Introduction

NeuralUML Studio is a state-of-the-art diagramming tool that leverages the power of PlantUML to turn text descriptions into professional diagrams. Unlike drag-and-drop tools, our text-first approach allows for rapid iteration, easy version control, and clearer architectural thinking.

💡 Pro Tip: PlantUML is an open-source project with extensive documentation. NeuralUML Studio supports the full PlantUML syntax.

# Getting Started

To create your first diagram, navigate to the Editor. You will see a text area on the left and a preview pane on the right.

  1. Clear the default code.
  2. Type @startuml to begin your diagram.
  3. Add your diagram logic (see syntax below).
  4. Type @enduml to close the diagram.
@startuml
Alice -> Bob : Hello World
@enduml

# Basic Syntax

NeuralUML supports all standard PlantUML syntax. Here are the building blocks:

Defining Participants

class User
actor Admin
database PostgreSQL
component "Backend Service" as BS

Use keywords like class, actor, database, component to define elements.

Packages & Grouping

package "Frontend" {
class UI
}

node "Server" {
class API
}

Group related elements using package, node, or folder.

# Relationships

Connect elements using arrows. The length and style of the arrow can affect the layout.

SyntaxMeaning
-->Solid line (Association/Dependency)
..>Dotted line (Weak dependency)
-->>Inheritance (extends)
--oAggregation
--*Composition
// Example
User --> Service : HTTP Request
Service --> Database : SQL Query
Admin --|> User : extends

# Styling

Customize the appearance of your diagrams using skinparam commands.

skinparam backgroundColor #1a1a1a
skinparam classBackgroundColor #2d2d2d
skinparam classBorderColor #8b5cf6
skinparam shadowing false

You can customize colors, fonts, shadows, and more. See the official PlantUML skinparam documentation for all options.

# Advanced Features

🎯 Notes & Comments

note right of User : This is a note
' This is a comment (won't appear)

🔄 Sequence Diagrams

Alice -> Bob: Authentication Request
Bob --> Alice: Authentication Response

# Common Patterns

Ready-to-use templates for common scenarios:

Microservices Architecture

@startuml
package "API Gateway" {
component Gateway
}
package "Services" {
component UserService
component OrderService
}
Gateway --> UserService
Gateway --> OrderService
@enduml

# Exporting

Once you are happy with your diagram, you can share it or save it locally.

1

Open SVG

Click the "Open SVG" button in the editor toolbar to open the raw vector image in a new tab.

2

Save Locally

Right-click the image and select "Save As" to download it to your computer.

3

Share the Code

Copy your PlantUML code and share it with your team. They can paste it into any PlantUML renderer.

# Troubleshooting

❌ Diagram not rendering?

  • Make sure you have @startuml and @enduml tags
  • Check for syntax errors (missing quotes, incorrect arrow syntax)
  • Try refreshing the page

⚠️ Layout looks messy?

  • Use longer arrows (---> instead of -->) to add spacing
  • Group related elements in packages
  • Use left to right direction for horizontal layouts

# Best Practices

✓ Keep it Simple

Don't try to show everything in one diagram. Break complex systems into multiple views.

✓ Use Meaningful Names

Choose clear, descriptive names for classes and relationships.

✓ Add Comments

Use comments (') to document your diagram logic for future reference.

✓ Version Control

Store your .puml files in Git alongside your code for easy tracking.

✓ Consistent Styling

Define a standard skinparam set for your team to maintain consistency.

✓ Iterate Quickly

Start with a rough sketch and refine. Text-based diagrams make iteration fast.

Ready to Start Diagramming?

Put your knowledge to practice in the live editor.

Open Editor →