feat(vscode): add mermaid diagram output

Author: zcf0508

packages/vscode/src/analyze.ts

@@ -9,6 +9,7 @@ import {
   analyzeTemplate,
   analyzeTsx,
   gen,
+  getMermaidText,
   getVisData,
   parse,
 } from '../../../packages/core/src';
@@ -85,5 +86,6 @@ export async function analyze(code: string, language: 'vue' | 'react') {
   return { code: 0, data: {
     vis: getVisData(graph, nodesUsedInTemplate, nodesUsedInStyle),
     suggests: gen(graph, nodesUsedInTemplate, nodesUsedInStyle),
+    mermaid: getMermaidText(graph, nodesUsedInTemplate, nodesUsedInStyle),
   }, msg: 'ok' };
 }

packages/vscode/src/index.ts

@@ -218,6 +218,7 @@ export function activate(context: vscode.ExtensionContext) {
     );
 
     outputChannel.append(`${fileName}: \n`);
+    outputChannel.append(`Mermaid: \n${res.data.mermaid}\n`);
     res.data.suggests.forEach((suggest) => {
       outputChannel.append(`[${
         suggest.type === 'info'