vitepress-plugin-plantuml 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 pengzhanbo
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,141 @@
+# vitepress-plugin-plantuml
+
+Render PlantUML diagrams in your VitePress site.
+
+在 VitePress 中渲染 PlantUML 图表。
+
+## Usage
+
+### With Vitepress-tuck
+
+**Installation:**
+
+```bash
+# npm
+npm install -D vitepress-tuck vitepress-plugin-plantuml
+# pnpm
+pnpm add -D vitepress-tuck vitepress-plugin-plantuml
+# yarn
+yarn add -D vitepress-tuck vitepress-plugin-plantuml
+```
+
+**Configuration:**
+
+```ts
+// .vitepress/config.ts
+import plantuml from 'vitepress-plugin-plantuml'
+import { defineConfig } from 'vitepress-tuck'
+
+export default defineConfig({
+  plugins: [plantuml()],
+})
+```
+
+```ts
+// .vitepress/theme/index.ts
+import type { Theme } from 'vitepress'
+import enhanceApp from 'virtual:enhance-app'
+import DefaultTheme from 'vitepress/theme'
+
+export default {
+  extends: DefaultTheme,
+  enhanceApp(ctx) {
+    enhanceApp(ctx)
+  },
+} satisfies Theme
+```
+
+### With Vitepress
+
+**Installation:**
+
+```bash
+# npm
+npm install -D vitepress-plugin-plantuml
+# pnpm
+pnpm add -D vitepress-plugin-plantuml
+# yarn
+yarn add -D vitepress-plugin-plantuml
+```
+
+**Configuration:**
+
+```ts
+// .vitepress/config.ts
+import { defineConfig } from 'vitepress'
+import { plantumlMarkdownPlugin, plantumlVitePlugin } from 'vitepress-plugin-plantuml'
+
+export default defineConfig({
+  markdown: {
+    config: (md) => {
+      md.use(plantumlMarkdownPlugin)
+    },
+  },
+  vite: {
+    plugins: [plantumlVitePlugin()],
+  },
+})
+```
+
+```ts
+// .vitepress/theme/index.ts
+import type { Theme } from 'vitepress'
+import { enhanceAppWithPlantuml } from 'vitepress-plugin-plantuml/client'
+import DefaultTheme from 'vitepress/theme'
+
+export default {
+  extends: DefaultTheme,
+  enhanceApp(ctx) {
+    enhanceAppWithPlantuml(ctx)
+  },
+} satisfies Theme
+```
+
+## Syntax
+
+Use `plantuml` code blocks to render diagrams.
+
+````md
+```plantuml
+@startuml
+Alice -> Bob: Authentication Request
+Bob --> Alice: Authentication Response
+
+Alice -> Bob: Another authentication Request
+Alice <-- Bob: Another authentication Response
+@enduml
+```
+````
+
+### Output Format
+
+You can specify the output format (`svg` or `png`) for individual diagrams:
+
+````md
+```plantuml png
+@startuml
+class Example {
+  +attribute: string
+  +method(): void
+}
+@enduml
+```
+````
+
+Or set a global default when configuring the plugin:
+
+```ts
+plantuml('png') // default is 'svg'
+```
+
+Supported formats: `svg`, `png`
+
+## Features
+
+- **Dark / Light mode** — Automatically generates both dark and light variants of diagrams, matching the current VitePress theme.
+- **Chart / Source tabs** — Toggle between the rendered diagram and its source code.
+- **Fullscreen mode** — Click the fullscreen button to view the diagram in a full-screen overlay.
+- **Download** — Download the current diagram as an image file.
+- **Multi-language** — Built-in support for English, Chinese, Japanese, Korean, Spanish, French, Russian, German, and Portuguese.
+- **SVG optimization** — SVGs are automatically optimized via SVGO for cleaner output.
+- **Caching** — Rendered diagrams are cached to disk for fast rebuilds.

package/assets/fallback.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200" viewBox="0 0 400 200"><rect width="100%" height="100%" fill="#f8f9fa" rx="8" ry="8"/><circle cx="200" cy="70" r="24" fill="#ffc107" stroke="#e5a800" stroke-width="2"/><text x="200" y="78" text-anchor="middle" font-size="28" font-family="Arial, sans-serif" fill="#5a3e00" font-weight="bold">!</text><text x="200" y="130" text-anchor="middle" font-size="18" font-family="Arial, Helvetica, sans-serif" fill="#333" font-weight="500">Load Fail</text><text x="200" y="155" text-anchor="middle" font-size="14" font-family="Arial, Helvetica, sans-serif" fill="#666">Please try again</text></svg>

package/dist/client/browser/index.d.ts

@@ -0,0 +1,24 @@
+import { EnhanceAppContext } from "vitepress";
+
+//#region src/client/VPPlantUML.vue.d.ts
+declare var __VLS_6: {}, __VLS_8: {};
+type __VLS_Slots = {} & {
+  default?: (props: typeof __VLS_6) => any;
+} & {
+  source?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+type __VLS_WithSlots<T, S> = T & {
+  new (): {
+    $slots: S;
+  };
+};
+//#endregion
+//#region src/client/index.d.ts
+declare function enhanceAppWithPlantuml({
+  app
+}: EnhanceAppContext): void;
+//#endregion
+export { _default as VPPlantUML, enhanceAppWithPlantuml };

package/dist/client/browser/index.js

@@ -0,0 +1,94 @@
+import "virtual:tuck-icons.css";
+import "../style.css";
+import { computed, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, isRef, nextTick, normalizeClass, normalizeStyle, onMounted, openBlock, ref, renderSlot, toDisplayString, unref, useTemplateRef, vShow, watch, withDirectives } from "vue";
+import { useFullscreen } from "@vueuse/core";
+import { VPTabSwitch, useZoomAndDrag } from "vitepress-plugin-toolkit/client";
+import { useData } from "vitepress/client";
+import { locales } from "virtual:vitepress-plantuml";
+//#region src/client/composables/locales.ts
+function useLocale() {
+	const { localeIndex } = useData();
+	return computed(() => locales[localeIndex.value] || locales.root || {});
+}
+//#endregion
+//#region src/client/composables/tabs.ts
+function useTabs() {
+	const locale = useLocale();
+	return {
+		tab: ref("chart"),
+		tabs: computed(() => [{
+			label: locale.value.chart,
+			value: "chart"
+		}, {
+			label: locale.value.source,
+			value: "source"
+		}])
+	};
+}
+//#endregion
+//#region src/client/VPPlantUML.vue
+const _hoisted_1 = { class: "vp-plantuml" };
+const _hoisted_2 = { class: "plantuml-header" };
+const _hoisted_3 = { class: "plantuml-actions" };
+const _hoisted_4 = { class: "plantuml-source" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+	__name: "VPPlantUML",
+	setup(__props) {
+		const { isDark } = useData();
+		const { tab, tabs } = useTabs();
+		const locale = useLocale();
+		const el = useTemplateRef("el");
+		const { actorStyle, reset, zoom, zoomIn, zoomOut, resetZoom } = useZoomAndDrag(el);
+		const { isFullscreen, isSupported, enter } = useFullscreen(el);
+		watch(isFullscreen, (newVal) => reset(newVal));
+		onMounted(() => watch(isDark, () => {
+			const img = el.value?.querySelector(isDark.value ? ".dark" : ".light");
+			if (!img) return;
+			img.onload = () => nextTick(reset);
+		}, { immediate: true }));
+		function download() {
+			const img = el.value?.querySelector(isDark.value ? ".dark" : ".light");
+			if (!img) return;
+			const url = img.src;
+			const a = document.createElement("a");
+			a.href = url;
+			a.download = "";
+			a.click();
+			a.remove();
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [
+				createElementVNode("div", _hoisted_2, [createVNode(unref(VPTabSwitch), {
+					modelValue: unref(tab),
+					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(tab) ? tab.value = $event : null),
+					items: unref(tabs)
+				}, null, 8, ["modelValue", "items"]), createElementVNode("div", _hoisted_3, [createElementVNode("button", { onClick: download }, [_cache[5] || (_cache[5] = createElementVNode("span", { class: "vpi-download" }, null, -1)), createTextVNode(" " + toDisplayString(unref(locale).download), 1)]), unref(isSupported) ? (openBlock(), createElementBlock("button", {
+					key: 0,
+					class: "fullscreen",
+					onClick: _cache[1] || (_cache[1] = (...args) => unref(enter) && unref(enter)(...args))
+				}, [_cache[6] || (_cache[6] = createElementVNode("span", { class: "vpi-fullscreen" }, null, -1)), createTextVNode(" " + toDisplayString(unref(locale).fullscreen), 1)])) : createCommentVNode("v-if", true)])]),
+				withDirectives(createElementVNode("div", {
+					ref_key: "el",
+					ref: el,
+					class: "plantuml-view"
+				}, [createElementVNode("div", {
+					class: "content",
+					style: normalizeStyle(unref(actorStyle))
+				}, [renderSlot(_ctx.$slots, "default")], 4), createElementVNode("div", { class: normalizeClass(["plantuml-zoom", { fullscreen: unref(isFullscreen) }]) }, [
+					createElementVNode("button", { onClick: _cache[2] || (_cache[2] = (...args) => unref(zoomOut) && unref(zoomOut)(...args)) }, [..._cache[7] || (_cache[7] = [createElementVNode("span", { class: "vpi-zoom-out" }, null, -1)])]),
+					createElementVNode("span", null, toDisplayString(unref(zoom)), 1),
+					createElementVNode("button", { onClick: _cache[3] || (_cache[3] = (...args) => unref(zoomIn) && unref(zoomIn)(...args)) }, [..._cache[8] || (_cache[8] = [createElementVNode("span", { class: "vpi-zoom-in" }, null, -1)])]),
+					createElementVNode("button", { onClick: _cache[4] || (_cache[4] = (...args) => unref(resetZoom) && unref(resetZoom)(...args)) }, [..._cache[9] || (_cache[9] = [createElementVNode("span", { class: "vpi-zoom-reset" }, null, -1)])])
+				], 2)], 512), [[vShow, unref(tab) === "chart"]]),
+				withDirectives(createElementVNode("div", _hoisted_4, [renderSlot(_ctx.$slots, "source")], 512), [[vShow, unref(tab) === "source"]])
+			]);
+		};
+	}
+});
+//#endregion
+//#region src/client/index.ts
+function enhanceAppWithPlantuml({ app }) {
+	app.component("VPPlantUML", _sfc_main);
+}
+//#endregion
+export { _sfc_main as VPPlantUML, enhanceAppWithPlantuml };

package/dist/client/ssr/index.d.ts

@@ -0,0 +1,24 @@
+import { EnhanceAppContext } from "vitepress";
+
+//#region src/client/VPPlantUML.vue.d.ts
+declare var __VLS_6: {}, __VLS_8: {};
+type __VLS_Slots = {} & {
+  default?: (props: typeof __VLS_6) => any;
+} & {
+  source?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+type __VLS_WithSlots<T, S> = T & {
+  new (): {
+    $slots: S;
+  };
+};
+//#endregion
+//#region src/client/index.d.ts
+declare function enhanceAppWithPlantuml({
+  app
+}: EnhanceAppContext): void;
+//#endregion
+export { _default as VPPlantUML, enhanceAppWithPlantuml };

package/dist/client/ssr/index.js

@@ -0,0 +1,75 @@
+import { computed, defineComponent, isRef, mergeProps, nextTick, onMounted, ref, unref, useSSRContext, useTemplateRef, watch } from "vue";
+import { ssrInterpolate, ssrRenderAttrs, ssrRenderClass, ssrRenderComponent, ssrRenderSlot, ssrRenderStyle } from "vue/server-renderer";
+import { useFullscreen } from "@vueuse/core";
+import { VPTabSwitch, useZoomAndDrag } from "vitepress-plugin-toolkit/client";
+import { useData } from "vitepress/client";
+import { locales } from "virtual:vitepress-plantuml";
+//#region src/client/composables/locales.ts
+function useLocale() {
+	const { localeIndex } = useData();
+	return computed(() => locales[localeIndex.value] || locales.root || {});
+}
+//#endregion
+//#region src/client/composables/tabs.ts
+function useTabs() {
+	const locale = useLocale();
+	return {
+		tab: ref("chart"),
+		tabs: computed(() => [{
+			label: locale.value.chart,
+			value: "chart"
+		}, {
+			label: locale.value.source,
+			value: "source"
+		}])
+	};
+}
+//#endregion
+//#region src/client/VPPlantUML.vue
+const _sfc_main = /* @__PURE__ */ defineComponent({
+	__name: "VPPlantUML",
+	__ssrInlineRender: true,
+	setup(__props) {
+		const { isDark } = useData();
+		const { tab, tabs } = useTabs();
+		const locale = useLocale();
+		const el = useTemplateRef("el");
+		const { actorStyle, reset, zoom, zoomIn, zoomOut, resetZoom } = useZoomAndDrag(el);
+		const { isFullscreen, isSupported, enter } = useFullscreen(el);
+		watch(isFullscreen, (newVal) => reset(newVal));
+		onMounted(() => watch(isDark, () => {
+			const img = el.value?.querySelector(isDark.value ? ".dark" : ".light");
+			if (!img) return;
+			img.onload = () => nextTick(reset);
+		}, { immediate: true }));
+		return (_ctx, _push, _parent, _attrs) => {
+			_push(`<div${ssrRenderAttrs(mergeProps({ class: "vp-plantuml" }, _attrs))}><div class="plantuml-header">`);
+			_push(ssrRenderComponent(unref(VPTabSwitch), {
+				modelValue: unref(tab),
+				"onUpdate:modelValue": ($event) => isRef(tab) ? tab.value = $event : null,
+				items: unref(tabs)
+			}, null, _parent));
+			_push(`<div class="plantuml-actions"><button><span class="vpi-download"></span> ${ssrInterpolate(unref(locale).download)}</button>`);
+			if (unref(isSupported)) _push(`<button class="fullscreen"><span class="vpi-fullscreen"></span> ${ssrInterpolate(unref(locale).fullscreen)}</button>`);
+			else _push(`<!---->`);
+			_push(`</div></div><div class="plantuml-view" style="${ssrRenderStyle(unref(tab) === "chart" ? null : { display: "none" })}"><div class="content" style="${ssrRenderStyle(unref(actorStyle))}">`);
+			ssrRenderSlot(_ctx.$slots, "default", {}, null, _push, _parent);
+			_push(`</div><div class="${ssrRenderClass([{ fullscreen: unref(isFullscreen) }, "plantuml-zoom"])}"><button><span class="vpi-zoom-out"></span></button><span>${ssrInterpolate(unref(zoom))}</span><button><span class="vpi-zoom-in"></span></button><button><span class="vpi-zoom-reset"></span></button></div></div><div class="plantuml-source" style="${ssrRenderStyle(unref(tab) === "source" ? null : { display: "none" })}">`);
+			ssrRenderSlot(_ctx.$slots, "source", {}, null, _push, _parent);
+			_push(`</div></div>`);
+		};
+	}
+});
+const _sfc_setup = _sfc_main.setup;
+_sfc_main.setup = (props, ctx) => {
+	const ssrContext = useSSRContext();
+	(ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/client/VPPlantUML.vue");
+	return _sfc_setup ? _sfc_setup(props, ctx) : void 0;
+};
+//#endregion
+//#region src/client/index.ts
+function enhanceAppWithPlantuml({ app }) {
+	app.component("VPPlantUML", _sfc_main);
+}
+//#endregion
+export { _sfc_main as VPPlantUML, enhanceAppWithPlantuml };

package/dist/client/style.css

@@ -0,0 +1,176 @@
+@import url("vitepress-plugin-toolkit/styles/tab-switch.css");
+
+.vp-plantuml {
+  display: flex;
+  flex-direction: column;
+  margin-block: 16px;
+  margin-inline: -24px;
+  overflow: hidden;
+  background: var(--vp-code-block-bg);
+}
+
+@media (min-width: 640px) {
+  .vp-plantuml {
+    margin-inline: 0;
+    border-radius: 8px;
+  }
+}
+
+html:not(.dark) .vp-plantuml img.dark,
+html.dark .vp-plantuml img.light {
+  display: none;
+}
+
+.vp-plantuml .plantuml-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  padding-block: 4px;
+  padding-inline: 8px;
+  background: var(--vp-code-block-bg);
+}
+
+.vp-plantuml .plantuml-actions {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  justify-content: center;
+  opacity: 1;
+  transition: opacity 0.25s ease-in-out;
+}
+
+@media (min-width: 640px) {
+  .vp-plantuml .plantuml-actions {
+    gap: 8px;
+    opacity: 0;
+  }
+}
+
+.vp-plantuml:hover .plantuml-actions {
+  opacity: 1;
+}
+
+.vp-plantuml .plantuml-actions button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 20px;
+  height: 20px;
+  padding-inline: 2px;
+  font-size: 12px;
+  background-color: transparent;
+  border-radius: 12px;
+  transition: background-color 0.25s ease-in-out;
+}
+
+.vp-plantuml .plantuml-actions button:hover {
+  background-color: var(--vp-c-gray-soft);
+}
+
+@media (min-width: 640px) {
+  .vp-plantuml .plantuml-actions button {
+    gap: 2px;
+    min-width: 24px;
+    height: 24px;
+    padding-inline: 4px;
+    font-size: 14px;
+  }
+}
+
+@media (max-width: 639px) {
+  .vp-plantuml .plantuml-actions button.fullscreen {
+    display: none;
+  }
+}
+
+.vp-plantuml .plantuml-view {
+  position: relative;
+  max-width: 100%;
+  min-height: 150px;
+  max-height: 50vh;
+  padding-block: 12px;
+  overflow: hidden;
+  text-align: center;
+  background: var(--vp-code-block-bg);
+}
+
+@media (min-width: 640px) {
+  .vp-plantuml .plantuml-view {
+    max-height: calc(100vh - 58px - var(--vp-nav-height) - var(--vp-layout-top-height, 0px));
+  }
+}
+
+.vp-plantuml .plantuml-view .content {
+  position: absolute;
+  width: max-content;
+  overflow: hidden;
+  will-change: width, height, top, left;
+}
+
+.vp-plantuml .plantuml-view .content.zooming {
+  transition: 0.25s ease-in-out;
+  transition-property: width, height, top, left;
+}
+
+.vp-plantuml .plantuml-view .content img {
+  width: 100%;
+  height: 100%;
+  margin-block: 0;
+}
+
+.vp-plantuml .plantuml-zoom {
+  position: absolute;
+  right: 8px;
+  bottom: 8px;
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  justify-content: center;
+  padding-block: 4px;
+  padding-inline: 8px;
+  background-color: var(--vp-c-bg);
+  border-radius: 4px;
+  box-shadow: var(--vp-shadow-3);
+}
+
+.vp-plantuml .plantuml-zoom.fullscreen {
+  right: 50%;
+  bottom: 24px;
+  font-size: 18px;
+  transform: translateX(50%);
+}
+
+.vp-plantuml .plantuml-zoom > :where(button, span) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 20px;
+  height: 20px;
+  padding-inline: 2px;
+  font-size: inherit;
+}
+
+.vp-plantuml .plantuml-zoom > span {
+  width: 48px;
+  text-align: right;
+}
+
+.vp-plantuml .plantuml-zoom.fullscreen > span {
+  width: 64px;
+}
+
+.vp-plantuml .plantuml-source div[class*="language-"] {
+  margin: 0;
+}
+
+
+.vp-plantuml [class*="vpi-"] {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+}
+
+.vp-plantuml .vpi-download {
+  width: 1.1em;
+  height: 1.1em;
+}

package/dist/node/index.d.ts

@@ -0,0 +1,35 @@
+import { PluginWithOptions } from "markdown-it";
+import { Plugin } from "vitepress";
+
+//#region src/node/plugin.d.ts
+/**
+ * @example
+ * ```ts
+ * import { plantuml } from 'vitepress-plugin-plantuml'
+ * import { defineConfig } from 'vitepress-tuck'
+ *
+ * export default defineConfig({
+ *   plugins: [plantuml()],
+ * })
+ * ```
+ */
+declare const plantuml: (options?: "svg" | "png" | undefined) => import("vitepress-tuck").VitepressPlugin;
+//#endregion
+//#region src/node/types.d.ts
+type PlantumlFormat = 'svg' | 'png';
+interface PlantumlLocaleData extends Record<string, unknown> {
+  chart: string;
+  source: string;
+  fullscreen: string;
+  download: string;
+}
+//#endregion
+//#region src/node/markdown.d.ts
+declare const plantumlMarkdownPlugin: PluginWithOptions<PlantumlFormat>;
+//#endregion
+//#region src/node/vite.d.ts
+declare function plantumlVitePlugin(options?: {
+  locales?: Record<string, PlantumlLocaleData>;
+}): Plugin[];
+//#endregion
+export { plantuml as default, plantuml, plantumlMarkdownPlugin, plantumlVitePlugin };

package/dist/node/index.js

@@ -0,0 +1,336 @@
+import { definePlugin } from "vitepress-tuck";
+import ansis from "ansis";
+import { createLocales, genHash, getVitepressConfig, iconPlugin, isBuild } from "vitepress-plugin-toolkit";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import { Buffer } from "node:buffer";
+import { deflateRawSync } from "node:zlib";
+import { LRUCache, attemptAsync, combineURLs, indent, remove } from "@pengzhanbo/utils";
+import fs, { createReadStream } from "node:fs";
+import { optimize } from "svgo";
+//#region src/node/constants.ts
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.join(path.dirname(__filename), "../");
+const OUTPUT_DIR = "plantuml";
+const SERVER_PREFIX = "/vitepress-plantuml/";
+const plantumlUrl = "https://www.plantuml.com/plantuml";
+const fallbackSVG = path.join(__dirname, "../assets", "fallback.svg");
+const fallbackPNG = path.join(__dirname, "../assets", "fallback.png");
+//#endregion
+//#region src/node/utils.ts
+const cache = new LRUCache({ maxSize: 1024 });
+function getFilename(hash, format, isDark) {
+	return `${hash}.${isDark ? "dark" : "light"}.${format}`;
+}
+function getOutputPath(dir, filename) {
+	return combineURLs(dir, OUTPUT_DIR, filename);
+}
+function parseFilename(filename) {
+	const [hash, isDark, format] = filename.split(".");
+	return {
+		hash,
+		format,
+		isDark: isDark === "dark"
+	};
+}
+function deflate(data) {
+	return deflateRawSync(Buffer.from(data, "utf-8"), { level: 9 }).toString("binary");
+}
+/**
+* @param byte - 6-bit byte value
+* @returns Encoded character
+* @see https://plantuml.com/en/text-encoding
+*
+* PlantUML uses a custom Base64 encoding scheme for text data.
+*/
+function encode6bit(byte) {
+	return byte < 10 ? String.fromCharCode(48 + byte) : byte < 36 ? String.fromCharCode(65 + byte - 10) : byte < 62 ? String.fromCharCode(97 + byte - 36) : byte === 62 ? "-" : "_";
+}
+function append3bytes(b1, b2, b3) {
+	const c1 = b1 >> 2;
+	const c2 = (b1 & 3) << 4 | b2 >> 4;
+	const c3 = (b2 & 15) << 2 | b3 >> 6;
+	const c4 = b3 & 63;
+	return encode6bit(c1 & 63) + encode6bit(c2 & 63) + encode6bit(c3 & 63) + encode6bit(c4 & 63);
+}
+/**
+* Custom Base64 encoding for PlantUML
+*
+* Mapping: 0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz-_
+*
+* @param data The input string to encode
+* @returns The Base64 encoded string
+*/
+function customEncodeBase64(data) {
+	let result = "";
+	for (let i = 0; i < data.length; i += 3) if (i + 2 === data.length) result += append3bytes(data.charCodeAt(i), data.charCodeAt(i + 1), 0);
+	else if (i + 1 === data.length) result += append3bytes(data.charCodeAt(i), 0, 0);
+	else result += append3bytes(data.charCodeAt(i), data.charCodeAt(i + 1), data.charCodeAt(i + 2));
+	return result;
+}
+function encodePlantuml(data) {
+	return customEncodeBase64(deflate(data));
+}
+//#endregion
+//#region src/node/markdown.ts
+const plantumlMarkdownPlugin = (md, format = "svg") => {
+	const config = getVitepressConfig();
+	const cacheDir = config.cacheDir;
+	const name = "plantuml";
+	const supportedFormats = ["svg", "png"];
+	const rawFence = md.renderer.rules.fence;
+	md.renderer.rules.fence = (...args) => {
+		const [tokens, idx, _, env] = args;
+		const { content, info } = tokens[idx];
+		const code = rawFence(...args);
+		if (!info.trim().startsWith(name)) return code;
+		const resolvedFormat = info.trim().slice(8).trim() || format;
+		if (resolvedFormat && !supportedFormats.includes(resolvedFormat)) {
+			config.logger.warn(`PlantUML format ${ansis.red(resolvedFormat)} is not supported, please use ${ansis.green(supportedFormats.join(", "))}`);
+			return code;
+		}
+		const hash = genHash(content, 12);
+		const light = getFilename(hash, resolvedFormat, false);
+		const dark = getFilename(hash, resolvedFormat, true);
+		let cached = cache.get(light);
+		if (!cached) cache.set(light, cached = {
+			content,
+			paths: /* @__PURE__ */ new Set()
+		});
+		cached.paths.add(env.path);
+		cached = cache.get(dark);
+		if (!cached) cache.set(dark, cached = {
+			content,
+			paths: /* @__PURE__ */ new Set()
+		});
+		cached.paths.add(env.path);
+		return `<VPPlantUML><img ${isBuild ? `src="${getOutputPath(cacheDir, light)}"` : `:src="\`${SERVER_PREFIX}${light}\`"`} alt="PlantUML light" class="light"><img ${isBuild ? `src="${getOutputPath(cacheDir, dark)}"` : `:src="\`${SERVER_PREFIX}${dark}\`"`} alt="PlantUML dark" class="dark"><template #source>${code}</template></VPPlantUML>`;
+	};
+};
+//#endregion
+//#region src/node/locales.ts
+const builtinLocales = [
+	[["en", "en-US"], {
+		chart: "Chart",
+		source: "Code",
+		fullscreen: "Fullscreen",
+		download: "Download"
+	}],
+	[["zh", "zh-CN"], {
+		chart: "图表",
+		source: "代码",
+		fullscreen: "全屏",
+		download: "下载"
+	}],
+	[["ja", "ja-JP"], {
+		chart: "グラフ",
+		source: "コード",
+		fullscreen: "全画面",
+		download: "ダウンロード"
+	}],
+	[["ko", "ko-KR"], {
+		chart: "차트",
+		source: "코드",
+		fullscreen: "전체화면",
+		download: "다운로드"
+	}],
+	[["es", "es-ES"], {
+		chart: "Gráfico",
+		source: "Código",
+		fullscreen: "Pantalla completa",
+		download: "Descargar"
+	}],
+	[["fr", "fr-FR"], {
+		chart: "Graphique",
+		source: "Code",
+		fullscreen: "Écran plein",
+		download: "Télécharger"
+	}],
+	[["ru", "ru-RU"], {
+		chart: "График",
+		source: "Код",
+		fullscreen: "Полный экран",
+		download: "Скачать"
+	}],
+	[["de", "de-DE"], {
+		chart: "Diagramm",
+		source: "Code",
+		fullscreen: "Vollbild",
+		download: "Herunterladen"
+	}],
+	[["pt", "pt-BR"], {
+		chart: "Gráfico",
+		source: "Código",
+		fullscreen: "Tela cheia",
+		download: "Baixar"
+	}]
+];
+//#endregion
+//#region src/node/vite.ts
+function plantumlVitePlugin(options = {}) {
+	const moduleId = "virtual:vitepress-plantuml";
+	const resolveId = `\0${moduleId}`;
+	return [
+		{
+			name: "vitepress:plantuml-locales",
+			resolveId(id) {
+				if (id === moduleId) return resolveId;
+			},
+			load(id) {
+				if (id === resolveId) return `export const locales = ${JSON.stringify(createLocales(builtinLocales, options.locales))}
+`;
+			}
+		},
+		iconPlugin([{
+			name: "download",
+			svg: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='m12 16l-5-5l1.4-1.45l2.6 2.6V4h2v8.15l2.6-2.6L17 11zm-6 4q-.825 0-1.412-.587T4 18v-3h2v3h12v-3h2v3q0 .825-.587 1.413T18 20z'/%3E%3C/svg%3E")`
+		}, {
+			name: "fullscreen",
+			svg: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M3 21v-5h2v3h3v2zm13 0v-2h3v-3h2v5zM3 8V3h5v2H5v3zm16 0V5h-3V3h5v5z'/%3E%3C/svg%3E")`
+		}]),
+		isBuild ? plantumlVitePluginWithBuild() : plantumlVitePluginWithServer()
+	];
+}
+function plantumlVitePluginWithServer() {
+	let config;
+	return {
+		name: "vitepress:plantuml",
+		configResolved(_config) {
+			config = _config;
+			fs.mkdirSync(path.join(config.cacheDir, OUTPUT_DIR), { recursive: true });
+		},
+		configureServer(server) {
+			server.middlewares.use(async (req, res, next) => {
+				const url = req.url;
+				if (!url.startsWith("/vitepress-plantuml/")) return next();
+				const filename = url.slice(20);
+				const { format, isDark } = parseFilename(filename);
+				const cached = cache.get(filename);
+				if (!cached) return next();
+				const type = format === "svg" ? "image/svg+xml" : `image/${format}`;
+				const outputPath = getOutputPath(config.cacheDir, filename);
+				if (fs.existsSync(outputPath)) {
+					res.setHeader("Content-Type", type);
+					return createReadStream(outputPath).pipe(res);
+				}
+				const [, buffer] = await (cached.promise ?? attemptAsync(async () => {
+					const buffer = await fetchPlantuml(cached.content, (isDark ? "d" : "") + format);
+					buffer && await fs.promises.writeFile(outputPath, buffer);
+					return buffer;
+				}));
+				if (!buffer) {
+					config.logger.error(`Failed to render: \n${indent(cached.content, " ".repeat(4))}`);
+					cached.promise = null;
+					return next();
+				}
+				res.setHeader("Content-Type", type);
+				return createReadStream(outputPath).pipe(res);
+			});
+		}
+	};
+}
+function plantumlVitePluginWithBuild() {
+	let config;
+	return {
+		name: "vitepress:plantuml",
+		enforce: "post",
+		configResolved(_config) {
+			config = _config;
+			fs.mkdirSync(path.join(config.cacheDir, OUTPUT_DIR), { recursive: true });
+		},
+		transform: {
+			filter: { id: /\.md($|\?.*)/ },
+			async handler(code, id) {
+				const pagePath = id.split("?")[0];
+				const tasks = [];
+				for (const [filename, cached] of cache.entries()) {
+					if (cached.loaded && cached.paths.has(pagePath)) continue;
+					const outputPath = getOutputPath(config.cacheDir, filename);
+					if (fs.existsSync(outputPath)) {
+						cached.loaded = true;
+						continue;
+					}
+					const { isDark, format } = parseFilename(filename);
+					const promise = cached.promise ?? attemptAsync(async () => {
+						const buffer = await fetchPlantuml(cached.content, (isDark ? "d" : "") + format);
+						if (!buffer) {
+							config.logger.error(`Failed to render: \n${indent(cached.content, "  ")}`);
+							await fs.promises.copyFile(format === "png" ? fallbackPNG : fallbackSVG, outputPath);
+							cached.promise = null;
+							return;
+						}
+						await fs.promises.writeFile(outputPath, buffer);
+						cached.loaded = true;
+					});
+					cached.promise = promise;
+					tasks.push(promise);
+				}
+				await Promise.all(tasks);
+				return code;
+			}
+		}
+	};
+}
+const RE_PLANTUML_TAG = /<\?plantuml.*?\?>/g;
+async function fetchPlantuml(source, format) {
+	const url = `${plantumlUrl}/${format}/${encodePlantuml(source)}`;
+	const res = await fetch(url);
+	if (!res.ok) return null;
+	if (format === "svg" || format === "dsvg") {
+		const data = svgo(await res.text());
+		return Buffer.from(data);
+	}
+	return Buffer.from(await res.arrayBuffer());
+}
+function svgo(svg) {
+	return optimize(svg, {
+		multipass: true,
+		plugins: [{
+			name: "removeRootStyle",
+			fn: () => {
+				let width;
+				let height;
+				let background;
+				return { element: { enter(element, parent) {
+					const attrs = element.attributes;
+					if (element.name === "svg") {
+						width = `${Number.parseInt(attrs.width)}`;
+						height = `${Number.parseInt(attrs.height)}`;
+						background = attrs.style?.split(";").filter((item) => item.trim().startsWith("background"))[0]?.split(":")[1]?.trim() || "";
+						delete attrs.style;
+					}
+					if (element.name === "rect" && attrs.fill === background && attrs.width === width && attrs.height === height && attrs.x === "0" && attrs.y === "0") remove(parent.children, element);
+				} } };
+			}
+		}, "preset-default"]
+	}).data.replaceAll(RE_PLANTUML_TAG, "");
+}
+//#endregion
+//#region src/node/plugin.ts
+/**
+* @example
+* ```ts
+* import { plantuml } from 'vitepress-plugin-plantuml'
+* import { defineConfig } from 'vitepress-tuck'
+*
+* export default defineConfig({
+*   plugins: [plantuml()],
+* })
+* ```
+*/
+const plantuml = definePlugin((format) => ({
+	name: "vitepress-plugin-plantuml",
+	client: { enhance: "enhanceAppWithPlantuml" },
+	markdown: {
+		config(md) {
+			md.use(plantumlMarkdownPlugin, format);
+		},
+		languageAlias: { plantuml: "txt" }
+	},
+	vite: { plugins: [plantumlVitePlugin()] }
+}));
+//#endregion
+//#region src/node/index.ts
+var node_default = plantuml;
+//#endregion
+export { node_default as default, plantuml, plantumlMarkdownPlugin, plantumlVitePlugin };

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "vitepress-plugin-plantuml",
+  "type": "module",
+  "version": "0.2.0",
+  "description": "Render PlantUML diagrams in your VitePress site.",
+  "author": "pengzhanbo <q942450674@outlook.com> (https://github.com/pengzhanbo/)",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/pengzhanbo/vitepress-tuck.git",
+    "directory": "packages/plugin-plantuml"
+  },
+  "keywords": [
+    "vitepress",
+    "vitepress-plugin",
+    "plantuml"
+  ],
+  "exports": {
+    ".": "./dist/node/index.js",
+    "./client": {
+      "browser": "./dist/client/browser/index.js",
+      "default": "./dist/client/ssr/index.js"
+    },
+    "./style.css": "./dist/client/style.css"
+  },
+  "module": "./dist/node/index.js",
+  "types": "./dist/node/index.d.ts",
+  "files": [
+    "assets",
+    "dist"
+  ],
+  "peerDependencies": {
+    "vitepress": "^1.6.4 || ^2.0.0-alpha.17",
+    "vue": "^3.5.0"
+  },
+  "dependencies": {
+    "@pengzhanbo/utils": "^3.7.3",
+    "@vueuse/core": "^14.3.0",
+    "ansis": "^4.3.1",
+    "svgo": "^4.0.1",
+    "vitepress-plugin-toolkit": "0.2.0",
+    "vitepress-tuck": "0.2.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "clean": "rimraf --glob ./dist",
+    "dev": "pnpm '/(tsdown|copy):watch/'",
+    "build": "pnpm tsdown && pnpm copy",
+    "copy": "cpx \"src/**/*.css\" dist",
+    "copy:watch": "pnpm copy -w",
+    "tsdown": "tsdown --config-loader unrun",
+    "tsdown:watch": "pnpm tsdown -w"
+  }
+}