Artifact Editor Formats

PlantUML

Full UML diagram support with local or server rendering.

Supported Diagram Types

• Class diagrams
• Sequence diagrams
• Use case diagrams
• Activity diagrams
• Component diagrams
• State diagrams
• Object diagrams
• Deployment diagrams
• Timing diagrams

Example

@startuml
class User {
  +id: int
  +name: string
  +email: string
  --
  +login()
  +logout()
}

class Order {
  +id: int
  +total: decimal
  --
  +addItem()
  +checkout()
}

User "1" -- "*" Order : places
@enduml

Configuration

plantuml:
  server: http://www.plantuml.com/plantuml  # or local
  format: svg  # svg, png, eps
  timeout: 30

---

Mermaid

Lightweight diagrams rendered in browser/embedded.

Supported Diagram Types

• Flowchart
• Sequence diagram
• Class diagram
• State diagram
• Entity Relationship
• Gantt chart
• Pie chart
• Git graph

Example

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

---

OpenSCAD

Parametric 3D CAD modeling.

Example

// Parametric box with lid
box_size = [50, 30, 20];
wall_thickness = 2;

module box() {
    difference() {
        cube(box_size);
        translate([wall_thickness, wall_thickness, wall_thickness])
            cube([
                box_size[0] - 2*wall_thickness,
                box_size[1] - 2*wall_thickness,
                box_size[2]
            ]);
    }
}

box();

3D Controls

• Rotate: Click and drag
• Zoom: Scroll wheel
• Pan: Right-click drag

---

Code (Pygments)

Syntax highlighting for 500+ languages.

Popular Languages

Python, JavaScript, TypeScript, Go, Rust, C/C++, Java, Ruby, PHP, SQL, Bash, YAML, JSON, HTML, CSS, and many more.

Example

def fibonacci(n: int) -> int:
    """Calculate the nth Fibonacci number."""
    if n <= 1:
        return n
    return fibonacci(n - 1) + fibonacci(n - 2)

---

SVG

Interactive vector graphics with visual editing.

Interactive Features

• Click to select elements
• Drag to move elements
• Resize handles on corners
• Delete key to remove
• Elements panel for management

Example

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="80" height="80" fill="#3498db"/>
  <circle cx="150" cy="50" r="40" fill="#e74c3c"/>
  <text x="100" y="150" text-anchor="middle">Hello SVG</text>
</svg>

---

Excalidraw

Hand-drawn style diagrams for informal sketching.

Features

• Looks hand-drawn (imperfect lines)
• Easy to create informal diagrams
• Great for whiteboarding
• Exports to PNG/SVG

Usage

Excalidraw files are JSON format (.excalidraw). The editor loads/saves in this format and renders using the Excalidraw engine.

---

Format Detection

Artifact Editor auto-detects format from:

1. File extension (.puml, .mmd, .scad, etc.)
2. Content markers (@startuml, ````mermaid`, etc.)
3. Manual selection from dropdown

Extension	Format
.puml, .plantuml	PlantUML
.mmd, .mermaid	Mermaid
.scad	OpenSCAD
.svg	SVG
.excalidraw	Excalidraw
.py, .js, etc.	Code