feat(md-enhance): add legacy flowchart

packages/md-enhance/src/node/index.ts

@@ -22,6 +22,7 @@ import {
   tasklist,
   vueDemo,
   legacyCodeDemo,
+  legacyFlowchart,
 } from "./markdown-it";
 import { getPluginConfig } from "./pluginConfig";
 
@@ -139,7 +140,10 @@ const mdEnhancePlugin: Plugin<MarkdownEnhanceOptions> = (options, context) => {
       if (getStatus("sup")) md.use(sup);
       if (getStatus("sub")) md.use(sub);
       if (footnoteEnable) md.use(footnote);
-      if (flowchartEnable) md.use(flowchart);
+      if (flowchartEnable) {
+        md.use(flowchart);
+        md.use(legacyFlowchart);
+      }
       if (getStatus("mark")) md.use(mark);
       if (tasklistEnable)
         md.use(tasklist, [

packages/md-enhance/src/node/markdown-it/flowchart.ts

@@ -1,4 +1,6 @@
 import hash = require("hash-sum");
+import { uml } from "./uml";
+
 import type { PluginSimple } from "markdown-it";
 import type Token = require("markdown-it/lib/token");
 
@@ -29,3 +31,25 @@ export const flowchart: PluginSimple = (md) => {
 
   md.renderer.rules["flowchart"] = flowchartRender;
 };
+
+/** @deprecated */
+export const legacyFlowchart: PluginSimple = (md) => {
+  uml(md, {
+    name: "flowchart",
+    open: "flowstart",
+    close: "flowend",
+    render: (tokens, idx): string => {
+      console.warn(
+        '"@flowstart ... @flowend" is deprecated, you should use ```flow ... ``` instead.'
+      );
+
+      const token = tokens[idx];
+      const key = `flowchart_${hash(idx)}`;
+      const { content, info } = token;
+
+      return `<FlowChart id="${key}" code="${encodeURIComponent(
+        content
+      )}" preset="${info.trim() || "vue"}"></FlowChart>`;
+    },
+  });
+};