1 line
10 KiB
JavaScript
1 line
10 KiB
JavaScript
"use strict";(globalThis.webpackChunkproject_public_docs=globalThis.webpackChunkproject_public_docs||[]).push([[256],{4052(e,n,i){i.r(n),i.d(n,{assets:()=>t,contentTitle:()=>a,default:()=>h,frontMatter:()=>d,metadata:()=>l,toc:()=>c});const l=JSON.parse('{"id":"formats","title":"Artifact Editor Formats","description":"PlantUML","source":"@site/docs/formats.md","sourceDirName":".","slug":"/formats","permalink":"/rob/artifact-editor/formats","draft":false,"unlisted":false,"tags":[],"version":"current","sidebarPosition":2,"frontMatter":{"sidebar_position":2},"sidebar":"docs","previous":{"title":"Artifact Editor Overview","permalink":"/rob/artifact-editor/"}}');var r=i(4848),s=i(8453);const d={sidebar_position:2},a="Artifact Editor Formats",t={},c=[{value:"PlantUML",id:"plantuml",level:2},{value:"Supported Diagram Types",id:"supported-diagram-types",level:3},{value:"Example",id:"example",level:3},{value:"Configuration",id:"configuration",level:3},{value:"Mermaid",id:"mermaid",level:2},{value:"Supported Diagram Types",id:"supported-diagram-types-1",level:3},{value:"Example",id:"example-1",level:3},{value:"OpenSCAD",id:"openscad",level:2},{value:"Example",id:"example-2",level:3},{value:"3D Controls",id:"3d-controls",level:3},{value:"Code (Pygments)",id:"code-pygments",level:2},{value:"Popular Languages",id:"popular-languages",level:3},{value:"Example",id:"example-3",level:3},{value:"SVG",id:"svg",level:2},{value:"Interactive Features",id:"interactive-features",level:3},{value:"Example",id:"example-4",level:3},{value:"Excalidraw",id:"excalidraw",level:2},{value:"Features",id:"features",level:3},{value:"Usage",id:"usage",level:3},{value:"Format Detection",id:"format-detection",level:2}];function o(e){const n={code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",hr:"hr",li:"li",ol:"ol",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,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.header,{children:(0,r.jsx)(n.h1,{id:"artifact-editor-formats",children:"Artifact Editor Formats"})}),"\n",(0,r.jsx)(n.h2,{id:"plantuml",children:"PlantUML"}),"\n",(0,r.jsx)(n.p,{children:"Full UML diagram support with local or server rendering."}),"\n",(0,r.jsx)(n.h3,{id:"supported-diagram-types",children:"Supported Diagram Types"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsx)(n.li,{children:"Class diagrams"}),"\n",(0,r.jsx)(n.li,{children:"Sequence diagrams"}),"\n",(0,r.jsx)(n.li,{children:"Use case diagrams"}),"\n",(0,r.jsx)(n.li,{children:"Activity diagrams"}),"\n",(0,r.jsx)(n.li,{children:"Component diagrams"}),"\n",(0,r.jsx)(n.li,{children:"State diagrams"}),"\n",(0,r.jsx)(n.li,{children:"Object diagrams"}),"\n",(0,r.jsx)(n.li,{children:"Deployment diagrams"}),"\n",(0,r.jsx)(n.li,{children:"Timing diagrams"}),"\n"]}),"\n",(0,r.jsx)(n.h3,{id:"example",children:"Example"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-plantuml",children:'@startuml\nclass User {\n +id: int\n +name: string\n +email: string\n --\n +login()\n +logout()\n}\n\nclass Order {\n +id: int\n +total: decimal\n --\n +addItem()\n +checkout()\n}\n\nUser "1" -- "*" Order : places\n@enduml\n'})}),"\n",(0,r.jsx)(n.h3,{id:"configuration",children:"Configuration"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-yaml",children:"plantuml:\n server: http://www.plantuml.com/plantuml # or local\n format: svg # svg, png, eps\n timeout: 30\n"})}),"\n",(0,r.jsx)(n.hr,{}),"\n",(0,r.jsx)(n.h2,{id:"mermaid",children:"Mermaid"}),"\n",(0,r.jsx)(n.p,{children:"Lightweight diagrams rendered in browser/embedded."}),"\n",(0,r.jsx)(n.h3,{id:"supported-diagram-types-1",children:"Supported Diagram Types"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsx)(n.li,{children:"Flowchart"}),"\n",(0,r.jsx)(n.li,{children:"Sequence diagram"}),"\n",(0,r.jsx)(n.li,{children:"Class diagram"}),"\n",(0,r.jsx)(n.li,{children:"State diagram"}),"\n",(0,r.jsx)(n.li,{children:"Entity Relationship"}),"\n",(0,r.jsx)(n.li,{children:"Gantt chart"}),"\n",(0,r.jsx)(n.li,{children:"Pie chart"}),"\n",(0,r.jsx)(n.li,{children:"Git graph"}),"\n"]}),"\n",(0,r.jsx)(n.h3,{id:"example-1",children:"Example"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-mermaid",children:"flowchart TD\n A[Start] --\x3e B{Is it working?}\n B --\x3e|Yes| C[Great!]\n B --\x3e|No| D[Debug]\n D --\x3e B\n"})}),"\n",(0,r.jsx)(n.hr,{}),"\n",(0,r.jsx)(n.h2,{id:"openscad",children:"OpenSCAD"}),"\n",(0,r.jsx)(n.p,{children:"Parametric 3D CAD modeling."}),"\n",(0,r.jsx)(n.h3,{id:"example-2",children:"Example"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-openscad",children:"// Parametric box with lid\nbox_size = [50, 30, 20];\nwall_thickness = 2;\n\nmodule box() {\n difference() {\n cube(box_size);\n translate([wall_thickness, wall_thickness, wall_thickness])\n cube([\n box_size[0] - 2*wall_thickness,\n box_size[1] - 2*wall_thickness,\n box_size[2]\n ]);\n }\n}\n\nbox();\n"})}),"\n",(0,r.jsx)(n.h3,{id:"3d-controls",children:"3D Controls"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:"Rotate"}),": Click and drag"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:"Zoom"}),": Scroll wheel"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:"Pan"}),": Right-click drag"]}),"\n"]}),"\n",(0,r.jsx)(n.hr,{}),"\n",(0,r.jsx)(n.h2,{id:"code-pygments",children:"Code (Pygments)"}),"\n",(0,r.jsx)(n.p,{children:"Syntax highlighting for 500+ languages."}),"\n",(0,r.jsx)(n.h3,{id:"popular-languages",children:"Popular Languages"}),"\n",(0,r.jsx)(n.p,{children:"Python, JavaScript, TypeScript, Go, Rust, C/C++, Java, Ruby, PHP, SQL, Bash, YAML, JSON, HTML, CSS, and many more."}),"\n",(0,r.jsx)(n.h3,{id:"example-3",children:"Example"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-python",children:'def fibonacci(n: int) -> int:\n """Calculate the nth Fibonacci number."""\n if n <= 1:\n return n\n return fibonacci(n - 1) + fibonacci(n - 2)\n'})}),"\n",(0,r.jsx)(n.hr,{}),"\n",(0,r.jsx)(n.h2,{id:"svg",children:"SVG"}),"\n",(0,r.jsx)(n.p,{children:"Interactive vector graphics with visual editing."}),"\n",(0,r.jsx)(n.h3,{id:"interactive-features",children:"Interactive Features"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:"Click"})," to select elements"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:"Drag"})," to move elements"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:"Resize handles"})," on corners"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:"Delete key"})," to remove"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:"Elements panel"})," for management"]}),"\n"]}),"\n",(0,r.jsx)(n.h3,{id:"example-4",children:"Example"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-svg",children:'<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">\n <rect x="10" y="10" width="80" height="80" fill="#3498db"/>\n <circle cx="150" cy="50" r="40" fill="#e74c3c"/>\n <text x="100" y="150" text-anchor="middle">Hello SVG</text>\n</svg>\n'})}),"\n",(0,r.jsx)(n.hr,{}),"\n",(0,r.jsx)(n.h2,{id:"excalidraw",children:"Excalidraw"}),"\n",(0,r.jsx)(n.p,{children:"Hand-drawn style diagrams for informal sketching."}),"\n",(0,r.jsx)(n.h3,{id:"features",children:"Features"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsx)(n.li,{children:"Looks hand-drawn (imperfect lines)"}),"\n",(0,r.jsx)(n.li,{children:"Easy to create informal diagrams"}),"\n",(0,r.jsx)(n.li,{children:"Great for whiteboarding"}),"\n",(0,r.jsx)(n.li,{children:"Exports to PNG/SVG"}),"\n"]}),"\n",(0,r.jsx)(n.h3,{id:"usage",children:"Usage"}),"\n",(0,r.jsxs)(n.p,{children:["Excalidraw files are JSON format (",(0,r.jsx)(n.code,{children:".excalidraw"}),"). The editor loads/saves in this format and renders using the Excalidraw engine."]}),"\n",(0,r.jsx)(n.hr,{}),"\n",(0,r.jsx)(n.h2,{id:"format-detection",children:"Format Detection"}),"\n",(0,r.jsx)(n.p,{children:"Artifact Editor auto-detects format from:"}),"\n",(0,r.jsxs)(n.ol,{children:["\n",(0,r.jsxs)(n.li,{children:["File extension (",(0,r.jsx)(n.code,{children:".puml"}),", ",(0,r.jsx)(n.code,{children:".mmd"}),", ",(0,r.jsx)(n.code,{children:".scad"}),", etc.)"]}),"\n",(0,r.jsxs)(n.li,{children:["Content markers (",(0,r.jsx)(n.code,{children:"@startuml"}),", ````mermaid`, etc.)"]}),"\n",(0,r.jsx)(n.li,{children:"Manual selection from dropdown"}),"\n"]}),"\n",(0,r.jsxs)(n.table,{children:[(0,r.jsx)(n.thead,{children:(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.th,{children:"Extension"}),(0,r.jsx)(n.th,{children:"Format"})]})}),(0,r.jsxs)(n.tbody,{children:[(0,r.jsxs)(n.tr,{children:[(0,r.jsxs)(n.td,{children:[(0,r.jsx)(n.code,{children:".puml"}),", ",(0,r.jsx)(n.code,{children:".plantuml"})]}),(0,r.jsx)(n.td,{children:"PlantUML"})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsxs)(n.td,{children:[(0,r.jsx)(n.code,{children:".mmd"}),", ",(0,r.jsx)(n.code,{children:".mermaid"})]}),(0,r.jsx)(n.td,{children:"Mermaid"})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:".scad"})}),(0,r.jsx)(n.td,{children:"OpenSCAD"})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:".svg"})}),(0,r.jsx)(n.td,{children:"SVG"})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:".excalidraw"})}),(0,r.jsx)(n.td,{children:"Excalidraw"})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsxs)(n.td,{children:[(0,r.jsx)(n.code,{children:".py"}),", ",(0,r.jsx)(n.code,{children:".js"}),", etc."]}),(0,r.jsx)(n.td,{children:"Code"})]})]})]})]})}function h(e={}){const{wrapper:n}={...(0,s.R)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(o,{...e})}):o(e)}},8453(e,n,i){i.d(n,{R:()=>d,x:()=>a});var l=i(6540);const r={},s=l.createContext(r);function d(e){const n=l.useContext(s);return l.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:d(e.components),l.createElement(s.Provider,{value:n},e.children)}}}]); |