Artifact Editor Overview
AI-enhanced editor for creating diagrams, sketches, 3D models, and other artifacts from code. Provides a split-view interface with live preview and supports multiple artifact formats.
Project Links
| Resource | URL |
|---|---|
| Git Repository | https://gitea.brrd.tech/rob/artifact-editor |
| Local Path | ~/PycharmProjects/artifact-editor |
Core Concept
Artifact Editor provides a unified interface for creating visual artifacts from text-based specifications. Write PlantUML, Mermaid, OpenSCAD, or other formats and see live previews. AI can generate or modify artifacts from natural language descriptions.
┌─────────────────────────────────────────────────────────────────────────┐
│ Artifact Editor │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌───────────────────────────┬───────────────────────────┐ │
│ │ Code Editor │ Live Preview │ │
│ │ ┌─────────────────────┐ │ ┌─────────────────────┐ │ │
│ │ │ @startuml │ │ │ ┌─────┐ │ │ │
│ │ │ class User { │ │ │ │User │ │ │ │
│ │ │ +name: string │ │ │ ├─────┤ │ │ │
│ │ │ +email: string │ │ │ │+name│ │ │ │
│ │ │ +login() │ │ │ │+email│ │ │ │
│ │ │ } │ │ │ │+login()│ │ │ │
│ │ │ @enduml │ │ │ └─────┘ │ │ │
│ │ └─────────────────────┘ │ └─────────────────────┘ │ │
│ │ │ │ │
│ │ [AI: "Add Order class"] │ [Renders automatically] │ │
│ └───────────────────────────┴───────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────────────────────┐ │
│ │ Formats: PlantUML │ Mermaid │ OpenSCAD │ Code │ SVG │ Excalidraw │ │
│ └──────────────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────┘
Supported Formats
| Format | Description | Use Case |
|---|---|---|
| PlantUML | UML diagrams | Class, sequence, activity diagrams |
| Mermaid | Flowcharts, sequences | Documentation, quick diagrams |
| OpenSCAD | Parametric 3D CAD | 3D models, mechanical parts |
| Code | 500+ languages | Syntax-highlighted code snippets |
| SVG | Vector graphics | Icons, logos, interactive graphics |
| Excalidraw | Hand-drawn style | Informal sketches, whiteboard |
Key Features
| Feature | Description |
|---|---|
| Split View | Code editor + live preview side by side |
| Live Rendering | Changes render automatically |
| AI Generation | "Describe what you want" → code |
| Interactive SVG | Click, drag, resize elements |
| Format Switching | Change formats, auto-update extension |
| 100+ Templates | Pre-built diagram templates |
| Voice Input | Dictation with 10-second timer |
| Undo/Redo | Both code and visual changes |
| 3D Controls | Rotation, zoom for OpenSCAD |
| QScintilla | Professional syntax highlighting |
Tech Stack
- Python 3.10+ with PyQt6
- QScintilla - Syntax highlighting
- CmdForge - AI tool integration
- PlantUML - Server or local rendering
- Mermaid - JavaScript rendering
- OpenSCAD - Local 3D rendering
- Pygments - Code highlighting
CLI Tools
# Generate artifact from description
echo "Create a class diagram for a blog system" | artifact-ai --format plantuml
# Export artifact to image
artifact-export diagram.puml --output diagram.png --format png
Quick Start
# Install
cd ~/PycharmProjects/artifact-editor
pip install -e .
# Run GUI
artifact-editor
# Open specific file
artifact-editor diagram.puml
# Generate from CLI
artifact-ai "sequence diagram for user login" > login.puml