CODELAND

Creating Your First Diagram

Quick Start with Samples

The easiest way to get started is using our sample library:

Click on the "Sample Diagrams" section in the left panel
Choose a diagram type that matches your needs
The sample code will load into the editor
Modify the text to match your requirements
Click "Submit" to save your diagram

Writing Diagram Code

Here's a simple flowchart example:

graph LR
    A[Start] --> B{Decision}
    B -->|Yes| C[Process]
    B -->|No| D[Alternative]
    C --> E[End]
    D --> E

Tips for writing diagram code:

Each line represents a connection or node
Use [] for rectangular boxes, {} for diamonds, () for rounded boxes
Use --> for arrows, -- for lines
Add text on arrows using |text|

Customization Options

Themes

Choose from 5 professional themes to match your documentation style:

Default - Clean and professional
Neutral - Minimal and modern
Forest - Green tones, nature-inspired
Dark - High contrast, dark background
Base - Simple and straightforward

Visual Styles

Classic - Traditional, clean lines
Hand-drawn - Casual, sketch-like appearance

Interactive Controls

Zoom Controls

Zoom In (+) - Enlarge the diagram for detail work
Zoom Out (-) - See the big picture
Reset - Return to optimal fit

Pan & Navigate

Click and drag to move around large diagrams
Your viewport position is automatically saved
Resume right where you left off