1 line
14 KiB
JavaScript
1 line
14 KiB
JavaScript
"use strict";(globalThis.webpackChunkproject_public_docs=globalThis.webpackChunkproject_public_docs||[]).push([[413],{6785(e,r,t){t.r(r),t.d(r,{assets:()=>l,contentTitle:()=>c,default:()=>h,frontMatter:()=>d,metadata:()=>n,toc:()=>a});const n=JSON.parse('{"id":"overview","title":"Artifact Editor Overview","description":"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.","source":"@site/docs/overview.md","sourceDirName":".","slug":"/","permalink":"/rob/artifact-editor/","draft":false,"unlisted":false,"tags":[],"version":"current","sidebarPosition":1,"frontMatter":{"slug":"/","sidebar_position":1},"sidebar":"docs","next":{"title":"Artifact Editor Formats","permalink":"/rob/artifact-editor/formats"}}');var i=t(4848),s=t(8453);const d={slug:"/",sidebar_position:1},c="Artifact Editor Overview",l={},a=[{value:"Project Links",id:"project-links",level:2},{value:"Core Concept",id:"core-concept",level:2},{value:"Supported Formats",id:"supported-formats",level:2},{value:"Key Features",id:"key-features",level:2},{value:"Tech Stack",id:"tech-stack",level:2},{value:"CLI Tools",id:"cli-tools",level:2},{value:"Quick Start",id:"quick-start",level:2}];function o(e){const r={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",li:"li",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,s.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(r.header,{children:(0,i.jsx)(r.h1,{id:"artifact-editor-overview",children:"Artifact Editor Overview"})}),"\n",(0,i.jsx)(r.p,{children:"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."}),"\n",(0,i.jsx)(r.h2,{id:"project-links",children:"Project Links"}),"\n",(0,i.jsxs)(r.table,{children:[(0,i.jsx)(r.thead,{children:(0,i.jsxs)(r.tr,{children:[(0,i.jsx)(r.th,{children:"Resource"}),(0,i.jsx)(r.th,{children:"URL"})]})}),(0,i.jsxs)(r.tbody,{children:[(0,i.jsxs)(r.tr,{children:[(0,i.jsx)(r.td,{children:(0,i.jsx)(r.strong,{children:"Git Repository"})}),(0,i.jsx)(r.td,{children:(0,i.jsx)(r.a,{href:"https://gitea.brrd.tech/rob/artifact-editor",children:"https://gitea.brrd.tech/rob/artifact-editor"})})]}),(0,i.jsxs)(r.tr,{children:[(0,i.jsx)(r.td,{children:(0,i.jsx)(r.strong,{children:"Local Path"})}),(0,i.jsx)(r.td,{children:(0,i.jsx)(r.code,{children:"~/PycharmProjects/artifact-editor"})})]})]})]}),"\n",(0,i.jsx)(r.h2,{id:"core-concept",children:"Core Concept"}),"\n",(0,i.jsx)(r.p,{children:"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."}),"\n",(0,i.jsx)(r.pre,{children:(0,i.jsx)(r.code,{children:'\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n\u2502 Artifact Editor \u2502\n\u251c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524\n\u2502 \u2502\n\u2502 \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502\n\u2502 \u2502 Code Editor \u2502 Live Preview \u2502 \u2502\n\u2502 \u2502 \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502 \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502 \u2502\n\u2502 \u2502 \u2502 @startuml \u2502 \u2502 \u2502 \u250c\u2500\u2500\u2500\u2500\u2500\u2510 \u2502 \u2502 \u2502\n\u2502 \u2502 \u2502 class User { \u2502 \u2502 \u2502 \u2502User \u2502 \u2502 \u2502 \u2502\n\u2502 \u2502 \u2502 +name: string \u2502 \u2502 \u2502 \u251c\u2500\u2500\u2500\u2500\u2500\u2524 \u2502 \u2502 \u2502\n\u2502 \u2502 \u2502 +email: string \u2502 \u2502 \u2502 \u2502+name\u2502 \u2502 \u2502 \u2502\n\u2502 \u2502 \u2502 +login() \u2502 \u2502 \u2502 \u2502+email\u2502 \u2502 \u2502 \u2502\n\u2502 \u2502 \u2502 } \u2502 \u2502 \u2502 \u2502+login()\u2502 \u2502 \u2502 \u2502\n\u2502 \u2502 \u2502 @enduml \u2502 \u2502 \u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2518 \u2502 \u2502 \u2502\n\u2502 \u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u2502 \u2502\n\u2502 \u2502 \u2502 \u2502 \u2502\n\u2502 \u2502 [AI: "Add Order class"] \u2502 [Renders automatically] \u2502 \u2502\n\u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u2502\n\u2502 \u2502\n\u2502 \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502\n\u2502 \u2502 Formats: PlantUML \u2502 Mermaid \u2502 OpenSCAD \u2502 Code \u2502 SVG \u2502 Excalidraw \u2502 \u2502\n\u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u2502\n\u2502 \u2502\n\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n'})}),"\n",(0,i.jsx)(r.h2,{id:"supported-formats",children:"Supported Formats"}),"\n",(0,i.jsxs)(r.table,{children:[(0,i.jsx)(r.thead,{children:(0,i.jsxs)(r.tr,{children:[(0,i.jsx)(r.th,{children:"Format"}),(0,i.jsx)(r.th,{children:"Description"}),(0,i.jsx)(r.th,{children:"Use Case"})]})}),(0,i.jsxs)(r.tbody,{children:[(0,i.jsxs)(r.tr,{children:[(0,i.jsx)(r.td,{children:(0,i.jsx)(r.strong,{children:"PlantUML"})}),(0,i.jsx)(r.td,{children:"UML diagrams"}),(0,i.jsx)(r.td,{children:"Class, sequence, activity diagrams"})]}),(0,i.jsxs)(r.tr,{children:[(0,i.jsx)(r.td,{children:(0,i.jsx)(r.strong,{children:"Mermaid"})}),(0,i.jsx)(r.td,{children:"Flowcharts, sequences"}),(0,i.jsx)(r.td,{children:"Documentation, quick diagrams"})]}),(0,i.jsxs)(r.tr,{children:[(0,i.jsx)(r.td,{children:(0,i.jsx)(r.strong,{children:"OpenSCAD"})}),(0,i.jsx)(r.td,{children:"Parametric 3D CAD"}),(0,i.jsx)(r.td,{children:"3D models, mechanical parts"})]}),(0,i.jsxs)(r.tr,{children:[(0,i.jsx)(r.td,{children:(0,i.jsx)(r.strong,{children:"Code"})}),(0,i.jsx)(r.td,{children:"500+ languages"}),(0,i.jsx)(r.td,{children:"Syntax-highlighted code snippets"})]}),(0,i.jsxs)(r.tr,{children:[(0,i.jsx)(r.td,{children:(0,i.jsx)(r.strong,{children:"SVG"})}),(0,i.jsx)(r.td,{children:"Vector graphics"}),(0,i.jsx)(r.td,{children:"Icons, logos, interactive graphics"})]}),(0,i.jsxs)(r.tr,{children:[(0,i.jsx)(r.td,{children:(0,i.jsx)(r.strong,{children:"Excalidraw"})}),(0,i.jsx)(r.td,{children:"Hand-drawn style"}),(0,i.jsx)(r.td,{children:"Informal sketches, whiteboard"})]})]})]}),"\n",(0,i.jsx)(r.h2,{id:"key-features",children:"Key Features"}),"\n",(0,i.jsxs)(r.table,{children:[(0,i.jsx)(r.thead,{children:(0,i.jsxs)(r.tr,{children:[(0,i.jsx)(r.th,{children:"Feature"}),(0,i.jsx)(r.th,{children:"Description"})]})}),(0,i.jsxs)(r.tbody,{children:[(0,i.jsxs)(r.tr,{children:[(0,i.jsx)(r.td,{children:(0,i.jsx)(r.strong,{children:"Split View"})}),(0,i.jsx)(r.td,{children:"Code editor + live preview side by side"})]}),(0,i.jsxs)(r.tr,{children:[(0,i.jsx)(r.td,{children:(0,i.jsx)(r.strong,{children:"Live Rendering"})}),(0,i.jsx)(r.td,{children:"Changes render automatically"})]}),(0,i.jsxs)(r.tr,{children:[(0,i.jsx)(r.td,{children:(0,i.jsx)(r.strong,{children:"AI Generation"})}),(0,i.jsx)(r.td,{children:'"Describe what you want" \u2192 code'})]}),(0,i.jsxs)(r.tr,{children:[(0,i.jsx)(r.td,{children:(0,i.jsx)(r.strong,{children:"Interactive SVG"})}),(0,i.jsx)(r.td,{children:"Click, drag, resize elements"})]}),(0,i.jsxs)(r.tr,{children:[(0,i.jsx)(r.td,{children:(0,i.jsx)(r.strong,{children:"Format Switching"})}),(0,i.jsx)(r.td,{children:"Change formats, auto-update extension"})]}),(0,i.jsxs)(r.tr,{children:[(0,i.jsx)(r.td,{children:(0,i.jsx)(r.strong,{children:"100+ Templates"})}),(0,i.jsx)(r.td,{children:"Pre-built diagram templates"})]}),(0,i.jsxs)(r.tr,{children:[(0,i.jsx)(r.td,{children:(0,i.jsx)(r.strong,{children:"Voice Input"})}),(0,i.jsx)(r.td,{children:"Dictation with 10-second timer"})]}),(0,i.jsxs)(r.tr,{children:[(0,i.jsx)(r.td,{children:(0,i.jsx)(r.strong,{children:"Undo/Redo"})}),(0,i.jsx)(r.td,{children:"Both code and visual changes"})]}),(0,i.jsxs)(r.tr,{children:[(0,i.jsx)(r.td,{children:(0,i.jsx)(r.strong,{children:"3D Controls"})}),(0,i.jsx)(r.td,{children:"Rotation, zoom for OpenSCAD"})]}),(0,i.jsxs)(r.tr,{children:[(0,i.jsx)(r.td,{children:(0,i.jsx)(r.strong,{children:"QScintilla"})}),(0,i.jsx)(r.td,{children:"Professional syntax highlighting"})]})]})]}),"\n",(0,i.jsx)(r.h2,{id:"tech-stack",children:"Tech Stack"}),"\n",(0,i.jsxs)(r.ul,{children:["\n",(0,i.jsxs)(r.li,{children:[(0,i.jsx)(r.strong,{children:"Python 3.10+"})," with ",(0,i.jsx)(r.strong,{children:"PyQt6"})]}),"\n",(0,i.jsxs)(r.li,{children:[(0,i.jsx)(r.strong,{children:"QScintilla"})," - Syntax highlighting"]}),"\n",(0,i.jsxs)(r.li,{children:[(0,i.jsx)(r.strong,{children:"CmdForge"})," - AI tool integration"]}),"\n",(0,i.jsxs)(r.li,{children:[(0,i.jsx)(r.strong,{children:"PlantUML"})," - Server or local rendering"]}),"\n",(0,i.jsxs)(r.li,{children:[(0,i.jsx)(r.strong,{children:"Mermaid"})," - JavaScript rendering"]}),"\n",(0,i.jsxs)(r.li,{children:[(0,i.jsx)(r.strong,{children:"OpenSCAD"})," - Local 3D rendering"]}),"\n",(0,i.jsxs)(r.li,{children:[(0,i.jsx)(r.strong,{children:"Pygments"})," - Code highlighting"]}),"\n"]}),"\n",(0,i.jsx)(r.h2,{id:"cli-tools",children:"CLI Tools"}),"\n",(0,i.jsx)(r.pre,{children:(0,i.jsx)(r.code,{className:"language-bash",children:'# Generate artifact from description\necho "Create a class diagram for a blog system" | artifact-ai --format plantuml\n\n# Export artifact to image\nartifact-export diagram.puml --output diagram.png --format png\n'})}),"\n",(0,i.jsx)(r.h2,{id:"quick-start",children:"Quick Start"}),"\n",(0,i.jsx)(r.pre,{children:(0,i.jsx)(r.code,{className:"language-bash",children:'# Install\ncd ~/PycharmProjects/artifact-editor\npip install -e .\n\n# Run GUI\nartifact-editor\n\n# Open specific file\nartifact-editor diagram.puml\n\n# Generate from CLI\nartifact-ai "sequence diagram for user login" > login.puml\n'})})]})}function h(e={}){const{wrapper:r}={...(0,s.R)(),...e.components};return r?(0,i.jsx)(r,{...e,children:(0,i.jsx)(o,{...e})}):o(e)}},8453(e,r,t){t.d(r,{R:()=>d,x:()=>c});var n=t(6540);const i={},s=n.createContext(i);function d(e){const r=n.useContext(s);return n.useMemo(function(){return"function"==typeof e?e(r):{...r,...e}},[r,e])}function c(e){let r;return r=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:d(e.components),n.createElement(s.Provider,{value:r},e.children)}}}]); |