diff --git a/README.md b/README.md index e48d55c..f3412bf 100644 --- a/README.md +++ b/README.md @@ -7,12 +7,14 @@ A standalone PyQt6-based editor for creating visual artifacts. Designed to integ ## Features - **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 -- **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 - **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 ## 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 | | `mermaid` | Flowcharts, sequence, ER, state diagrams | Node editing with shapes, connections | | `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 @@ -38,6 +43,7 @@ pip install PyQt6 sudo apt install plantuml # For PlantUML npm install -g @mermaid-js/mermaid-cli # For Mermaid sudo apt install openscad # For 3D CAD +pip install pygments pillow # For code syntax highlighting ``` ## Usage @@ -51,6 +57,9 @@ artifact-editor # Launch for specific format artifact-editor --type mermaid artifact-editor --type openscad +artifact-editor --type code +artifact-editor --type svg +artifact-editor --type excalidraw # Open existing file 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 - 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 ``` @@ -97,15 +130,21 @@ artifact-editor/ │ └── renderers/ # Convert source to visual output │ ├── plantuml.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 - **Ctrl+S** - Save file -- **Ctrl+Z** - Undo +- **Ctrl+Z** - Undo (works for both code and visual edits) - **Ctrl+Y** - Redo +- **Delete** - Remove selected element (SVG mode) - **Ctrl+Mouse wheel** - Zoom preview +- **Click+Drag** - Move elements in SVG preview +- **Corner handles** - Resize selected elements in SVG preview ## Integration