[{"data":1,"prerenderedAt":207},["ShallowReactive",2],{"text-diagram-doc:\u002Fen\u002Fguide\u002Fdeployment":3},{"id":4,"title":5,"body":6,"description":195,"extension":196,"keywords":197,"locale":198,"meta":199,"navigation":200,"order":201,"path":202,"section":203,"seo":204,"stem":205,"__hash__":206},"docs\u002Fguide\u002Fdeployment.en.md","Deployment and assets",{"type":7,"value":8,"toc":188},"minimark",[9,14,39,42,46,60,67,71,82,89,93,119,123,126,161,184],[10,11,13],"h2",{"id":12},"browser-and-ssr","Browser and SSR",[15,16,17,18,22,23,26,27,30,31,38],"p",{},"The root ",[19,20,21],"code",{},"@quirekit\u002Ftext-diagram"," entry contains pure models and templates. SVG \u002F PNG rendering, CodeMirror and dialogs require a browser. Do not run them in Nuxt server setup. Mount the workbench within ",[19,24,25],{},"ClientOnly"," or a ",[19,28,29],{},".client.vue"," boundary; SSR can display an already saved PNG. Nuxt's ",[32,33,37],"a",{"href":34,"rel":35},"https:\u002F\u002Fnuxt.com\u002Fdocs\u002F4.x\u002Fapi\u002Fcomponents\u002Fclient-only",[36],"nofollow","ClientOnly documentation"," describes the client boundary.",[15,40,41],{},"This site uses docs-kit's client-only example boundary. Static output still contains the tutorials and API text rather than an empty SPA shell.",[10,43,45],{"id":44},"ship-the-engine-assets","Ship the engine assets",[15,47,48,49,51,52,55,56,59],{},"Mermaid loads on demand. The official PlantUML JavaScript core and Graphviz WASM are bundled in ",[19,50,21],{},"'s ",[19,53,54],{},"dist\u002Fdiagram-frame.iife.js",", referenced through ",[19,57,58],{},"new URL(..., import.meta.url)"," inside the package.",[15,61,62,63,66],{},"Let the bundler process and publish this file. Copying only ",[19,64,65],{},"browser.mjs"," loses the engine asset. Do not replace the asset path with a remote rendering service. After a Vite \u002F Nuxt build, check for the asset in static output and actually render a PlantUML and DOT diagram from that output. Initial use still loads site scripts: local rendering does not imply automatic offline caching.",[10,68,70],{"id":69},"csp-and-images","CSP and images",[15,72,73,74,77,78,81],{},"PlantUML \u002F DOT run in a ",[19,75,76],{},"srcdoc"," sandbox frame with script permission and no ",[19,79,80],{},"allow-same-origin",". The frame policy permits the bundled engine's origin, WASM execution and required inline styles, while denying network connections. A stricter parent policy can still block execution.",[15,83,84,85,88],{},"Verify the host's frame, script origin, WASM and style policies in production. SVG previews use Blob images; PNG uses ",[19,86,87],{},"data:image\u002Fpng",". Do not copy a broad policy that relaxes the entire application. If deployment policy prevents editing, retain source or an existing preview and explain that editing is unavailable.",[10,90,92],{"id":91},"license-artifacts","License artifacts",[15,94,95,96,99,100,103,104,107,108,99,111,114,115,118],{},"Both QuireKit packages are MIT. Preserve their ",[19,97,98],{},"LICENSE.md",", ",[19,101,102],{},"THIRD_PARTY_NOTICES.md"," and the renderer's ",[19,105,106],{},"ENGINE_LICENSES.txt"," when distributing bundled assets. Third-party engines retain their own licenses. This site generates ",[19,109,110],{},"\u002Flicenses\u002Fengines.txt",[19,112,113],{},"\u002Flicenses\u002Ftext-diagram.txt"," and ",[19,116,117],{},"\u002Flicenses\u002Fthird-party-notices.txt"," from the original package texts and includes them in static output.",[10,120,122],{"id":121},"develop-and-preview-this-site","Develop and preview this site",[15,124,125],{},"Use Node 22 and pnpm from the repository root:",[127,128,133],"pre",{"className":129,"code":130,"language":131,"meta":132,"style":132},"language-sh shiki shiki-themes github-light github-light github-dark","pnpm --filter @quirekit\u002Ftext-diagram-docs dev\npnpm --filter @quirekit\u002Ftext-diagram-docs typecheck\npnpm --filter @quirekit\u002Ftext-diagram-docs build\npnpm --filter @quirekit\u002Ftext-diagram-docs test:browser\n","sh","",[19,134,135,143,149,155],{"__ignoreMap":132},[136,137,140],"span",{"class":138,"line":139},"line",1,[136,141,142],{},"pnpm --filter @quirekit\u002Ftext-diagram-docs dev\n",[136,144,146],{"class":138,"line":145},2,[136,147,148],{},"pnpm --filter @quirekit\u002Ftext-diagram-docs typecheck\n",[136,150,152],{"class":138,"line":151},3,[136,153,154],{},"pnpm --filter @quirekit\u002Ftext-diagram-docs build\n",[136,156,158],{"class":138,"line":157},4,[136,159,160],{},"pnpm --filter @quirekit\u002Ftext-diagram-docs test:browser\n",[15,162,163,164,167,168,171,172,175,176,179,180,183],{},"The fixed preview is ",[19,165,166],{},"http:\u002F\u002F127.0.0.1:3260\u002F","; startup fails if the port is occupied. ",[19,169,170],{},"build"," writes ",[19,173,174],{},"apps\u002Ftext-diagram-docs\u002F.output\u002Fpublic",", including bilingual pages, raw Markdown, ",[19,177,178],{},"llms.txt",", complete example sources and engine assets. The planned domain is ",[19,181,182],{},"text-diagram.quirekit.com","; this delivery does not publish the domain or npm packages.",[185,186,187],"style",{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":132,"searchDepth":145,"depth":145,"links":189},[190,191,192,193,194],{"id":12,"depth":145,"text":13},{"id":44,"depth":145,"text":45},{"id":69,"depth":145,"text":70},{"id":91,"depth":145,"text":92},{"id":121,"depth":145,"text":122},"Keep local engine assets, separate server-side models from browser rendering and verify production policies.","md",null,"en",{},true,6,"\u002Fen\u002Fguide\u002Fdeployment","Integration",{"title":5,"description":195},"guide\u002Fdeployment.en","Nr1BjAqx8uoLQfxI8Caj5VwvDBLMxo8ALi2AHbLYD7I",1793045389921]