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:
+-
+
- File extension (
.puml,.mmd,.scad, etc.)
+ - Content markers (
@startuml, ````mermaid`, etc.)
+ - Manual selection from dropdown +
| Extension | Format |
|---|---|
.puml, .plantuml | PlantUML |
.mmd, .mermaid | Mermaid |
.scad | OpenSCAD |
.svg | SVG |
.excalidraw | Excalidraw |
.py, .js, etc. | Code |