docs: Update README with interactive SVG editing features
- Add interactive SVG editing to features list - Document click-to-select, drag-to-move, resize handles - Add Delete key and visual editing shortcuts - Update SVG section with full feature list - Note that undo/redo works for visual changes too 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
d7c64c1621
commit
6aa226b136
49
README.md
49
README.md
|
|
@ -7,12 +7,14 @@ A standalone PyQt6-based editor for creating visual artifacts. Designed to integ
|
||||||
## Features
|
## Features
|
||||||
|
|
||||||
- **Split-view interface** - Code editor on the left, live preview on the right
|
- **Split-view interface** - Code editor on the left, live preview on the right
|
||||||
- **Multi-format support** - PlantUML, Mermaid, and OpenSCAD
|
- **Multi-format support** - PlantUML, Mermaid, OpenSCAD, Code, SVG, and Excalidraw
|
||||||
|
- **Interactive SVG editing** - Click to select, drag to move, resize with handles
|
||||||
- **Elements panel** - View and manage diagram elements
|
- **Elements panel** - View and manage diagram elements
|
||||||
- **Visual editing** - Add, edit, and delete elements via dialogs
|
- **Visual editing** - Add, edit, and delete elements via dialogs or directly in preview
|
||||||
- **Templates** - Start from pre-built templates for common diagrams
|
- **Templates** - Start from pre-built templates for common diagrams
|
||||||
- **Syntax highlighting** - Format-specific code highlighting
|
- **Syntax highlighting** - Format-specific code highlighting
|
||||||
- **Live preview** - See changes as you type
|
- **Live preview** - See changes as you type (bidirectional sync)
|
||||||
|
- **Undo/Redo** - Works for both code and visual changes
|
||||||
- **3D controls** - Rotate/pan OpenSCAD models with mouse
|
- **3D controls** - Rotate/pan OpenSCAD models with mouse
|
||||||
|
|
||||||
## Supported Artifact Types
|
## Supported Artifact Types
|
||||||
|
|
@ -22,6 +24,9 @@ A standalone PyQt6-based editor for creating visual artifacts. Designed to integ
|
||||||
| `plantuml` | UML diagrams (class, sequence, component, etc.) | Element editing, relationships, click-to-select |
|
| `plantuml` | UML diagrams (class, sequence, component, etc.) | Element editing, relationships, click-to-select |
|
||||||
| `mermaid` | Flowcharts, sequence, ER, state diagrams | Node editing with shapes, connections |
|
| `mermaid` | Flowcharts, sequence, ER, state diagrams | Node editing with shapes, connections |
|
||||||
| `openscad` | 3D parametric CAD models | Transform controls (translate/rotate/scale), module insertion |
|
| `openscad` | 3D parametric CAD models | Transform controls (translate/rotate/scale), module insertion |
|
||||||
|
| `code` | Syntax-highlighted code snippets | 500+ languages, multiple themes, line numbers, font size |
|
||||||
|
| `svg` | Direct SVG graphics editing | Interactive visual editing, drag/resize, UI wireframes |
|
||||||
|
| `excalidraw` | Hand-drawn style diagrams | Sketch-like visuals, AI-readable JSON, whiteboard style |
|
||||||
|
|
||||||
## Installation
|
## Installation
|
||||||
|
|
||||||
|
|
@ -38,6 +43,7 @@ pip install PyQt6
|
||||||
sudo apt install plantuml # For PlantUML
|
sudo apt install plantuml # For PlantUML
|
||||||
npm install -g @mermaid-js/mermaid-cli # For Mermaid
|
npm install -g @mermaid-js/mermaid-cli # For Mermaid
|
||||||
sudo apt install openscad # For 3D CAD
|
sudo apt install openscad # For 3D CAD
|
||||||
|
pip install pygments pillow # For code syntax highlighting
|
||||||
```
|
```
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|
@ -51,6 +57,9 @@ artifact-editor
|
||||||
# Launch for specific format
|
# Launch for specific format
|
||||||
artifact-editor --type mermaid
|
artifact-editor --type mermaid
|
||||||
artifact-editor --type openscad
|
artifact-editor --type openscad
|
||||||
|
artifact-editor --type code
|
||||||
|
artifact-editor --type svg
|
||||||
|
artifact-editor --type excalidraw
|
||||||
|
|
||||||
# Open existing file
|
# Open existing file
|
||||||
artifact-editor --type plantuml --initial-file diagram.puml
|
artifact-editor --type plantuml --initial-file diagram.puml
|
||||||
|
|
@ -82,6 +91,30 @@ artifact-editor --type plantuml --initial-file diagram.puml
|
||||||
- Insert at cursor, end of file, or inside modules
|
- Insert at cursor, end of file, or inside modules
|
||||||
- 3D preview with mouse rotation
|
- 3D preview with mouse rotation
|
||||||
|
|
||||||
|
**For Code:**
|
||||||
|
- Syntax highlighting for 500+ programming languages
|
||||||
|
- Multiple color themes (Monokai, Dracula, GitHub, etc.)
|
||||||
|
- Line numbers toggle
|
||||||
|
- Adjustable font size
|
||||||
|
- Live preview as you type
|
||||||
|
|
||||||
|
**For SVG:**
|
||||||
|
- **Interactive visual editing** - Click elements to select, drag to move, resize with corner handles
|
||||||
|
- Direct vector graphics editing in code or visually
|
||||||
|
- UI wireframe templates (login forms, dashboards, mobile screens)
|
||||||
|
- Pre-built UI components (buttons, inputs, cards, modals, navbars)
|
||||||
|
- System architecture and flowchart templates
|
||||||
|
- Pixel-perfect element positioning using SVG renderer bounds
|
||||||
|
- Delete key removes selected elements
|
||||||
|
- All visual changes are undoable with Ctrl+Z
|
||||||
|
|
||||||
|
**For Excalidraw:**
|
||||||
|
- Hand-drawn/sketch-style diagrams
|
||||||
|
- AI-readable JSON format (perfect for AI collaboration)
|
||||||
|
- Whiteboard-style visuals that invite discussion
|
||||||
|
- Flowcharts, mind maps, and wireframe templates
|
||||||
|
- Exports to SVG or native .excalidraw format
|
||||||
|
|
||||||
## Architecture
|
## Architecture
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
@ -97,15 +130,21 @@ artifact-editor/
|
||||||
│ └── renderers/ # Convert source to visual output
|
│ └── renderers/ # Convert source to visual output
|
||||||
│ ├── plantuml.py
|
│ ├── plantuml.py
|
||||||
│ ├── mermaid.py
|
│ ├── mermaid.py
|
||||||
│ └── openscad.py
|
│ ├── openscad.py
|
||||||
|
│ ├── code.py # Pygments-based syntax highlighting
|
||||||
|
│ ├── svg.py # Direct SVG editing with UI components
|
||||||
|
│ └── excalidraw.py # Hand-drawn style diagrams
|
||||||
```
|
```
|
||||||
|
|
||||||
## Keyboard Shortcuts
|
## Keyboard Shortcuts
|
||||||
|
|
||||||
- **Ctrl+S** - Save file
|
- **Ctrl+S** - Save file
|
||||||
- **Ctrl+Z** - Undo
|
- **Ctrl+Z** - Undo (works for both code and visual edits)
|
||||||
- **Ctrl+Y** - Redo
|
- **Ctrl+Y** - Redo
|
||||||
|
- **Delete** - Remove selected element (SVG mode)
|
||||||
- **Ctrl+Mouse wheel** - Zoom preview
|
- **Ctrl+Mouse wheel** - Zoom preview
|
||||||
|
- **Click+Drag** - Move elements in SVG preview
|
||||||
|
- **Corner handles** - Resize selected elements in SVG preview
|
||||||
|
|
||||||
## Integration
|
## Integration
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue