docs: update mermaid

Author: johnsoncodehk

README.md

@@ -168,149 +168,91 @@ To develop with upstream Volar.js modules, you can setup workspace with https://
 
 ## High Level System Overview
 
+<!-- Editor link: https://www.mermaidchart.com/app/projects/c62d8944-0e06-47f0-a8de-f89a7378490f/diagrams/91fd02c0-5c91-4f72-a8b4-7af21b7c4d86/version/v0.1/edit -->
+
 ```mermaid
 flowchart LR
-	%% IDEs
-	VSC[VSCode]
-	COC[coc.nvim]
-	NEO[Neovim]
-	VIM[vim-lsp]
-	SUBLIME[Sublime]
-	ATOM[Atom]
-	EMACS[Emacs]
-	NOVA[Nova]
-	LAPCE[Lapce]
-
-	%% Language Clients
-	COC_VUE[yaegassy/coc-volar]
-	NEO_VUE[neovim/nvim-lspconfig]
-	VIM_VUE[mattn/vim-lsp-settings]
-	SUBLIME_VUE[sublimelsp/LSP-volar]
-	ATOM_VUE[kabiaa/atom-ide-volar]
-	EMACS_VUE[jadestrong/lsp-volar]
-	NOVA_VUE[tommasongr/nova-vue]
-	LAPCE_VUE[xiaoxin-sky/lapce-vue]
-
-	click COC_VUE "https://github.com/yaegassy/coc-volar"
-	click NEO_VUE "https://github.com/neovim/nvim-lspconfig"
-	click VIM_VUE "https://github.com/mattn/vim-lsp-settings"
-	click SUBLIME_VUE "https://github.com/sublimelsp/LSP-volar"
-	click ATOM_VUE "https://github.com/kabiaa/atom-ide-volar"
-	click EMACS_VUE "https://github.com/jadestrong/lsp-volar"
-	click NOVA_VUE "https://github.com/tommasongr/nova-vue"
-	click LAPCE_VUE "https://github.com/xiaoxin-sky/lapce-vue"
-
-	%% Volar - Extensions
-	VSC_VUE[vscode-vue]
-	VSC_TSVP[vscode-typescript-vue-plugin]
-
-	click VSC_VUE "https://github.com/vuejs/language-tools/tree/master/extensions/vscode"
-	click VSC_TSVP "https://github.com/vuejs/language-tools/tree/master/extensions/vscode-typescript-plugin"
-
-	%% Volar - Packages
-	VOLAR_VUE_SERVER["@vue/language-server"]
-	VOLAR_VUE_TS["@vue/typescript"]
-	VOLAR_VUE_CORE["@vue/language-core"]
-	VOLAR_VUE_SERVICE["@vue/language-service"]
-	VOLAR_PUG_SERVICE["@volar/pug-language-service"]
-	VOLAR_TS_SERVICE["@volar/typescript-language-service"]
-	VUE_TSC[vue-tsc]
-	VUE_COMPONENT_META[vue-component-meta]
-	TS_VUE_PLUGIN[typescript-vue-plugin]
-
-	click VOLAR_VUE_SERVER "https://github.com/vuejs/language-tools/tree/master/packages/language-server"
-	click VOLAR_VUE_TS "https://github.com/vuejs/language-tools/tree/master/packages/typescript"
-	click VOLAR_VUE_CORE "https://github.com/vuejs/language-tools/tree/master/packages/language-core"
-	click VOLAR_VUE_SERVICE "https://github.com/vuejs/language-tools/tree/master/packages/language-service"
-	click VUE_TSC "https://github.com/vuejs/language-tools/tree/master/packages/tsc"
-	click VUE_COMPONENT_META "https://github.com/vuejs/language-tools/tree/master/packages/component-meta"
-	click TS_VUE_PLUGIN "https://github.com/vuejs/language-tools/tree/master/packages/typescript-plugin"
-	click VOLAR_PUG_SERVICE "https://github.com/vuejs/language-tools/tree/master/packages/pug-language-service"
-	click VOLAR_TS_SERVICE "https://github.com/vuejs/language-tools/tree/master/packages/typescript-language-service"
-
-	%% External Packages
-	HTML_SERVICE[vscode-html-languageservice]
-	CSS_SERVICE[vscode-css-languageservice]
-	JSON_SERVICE[vscode-json-languageservice]
-	%% TS[typescript]
-	VSC_TS[vscode.typescript-language-features]
-	VUE_REPL["@vue/repl"]
-	MONACO_VOLAR[Kingwl/monaco-volar]
-	%% VITE_PLUGIN_CHECKER[fi3ework/vite-plugin-checker]
-	%% COMPILE_VUE_SFC[leonzalion/compile-vue-sfc]
-
-	click HTML_SERVICE "https://github.com/microsoft/vscode-html-languageservice"
-	click CSS_SERVICE "https://github.com/microsoft/vscode-css-languageservice"
-	click JSON_SERVICE "https://github.com/microsoft/vscode-json-languageservice"
-	click TS "https://github.com/microsoft/TypeScript"
-	click VSC_TS "https://github.com/microsoft/vscode/tree/main/packages/typescript-language-features"
-	click VUE_REPL "https://github.com/vuejs/repl"
-	click MONACO_VOLAR "https://github.com/Kingwl/monaco-volar"
-	%% click VITE_PLUGIN_CHECKER "https://github.com/fi3ework/vite-plugin-checker"
-	%% click COMPILE_VUE_SFC "https://github.com/leonzalion/compile-vue-sfc"
-
-	subgraph VUE_CLIENTS[Language Clients]
-	  direction LR
-	  VUE_CLIENT_SEMANTIC[Semantic Features]
-	  VUE_CLIENT_SYNTACTIC[Syntactic Features]
-	end
-
-	click VUE_CLIENT_SEMANTIC "https://github.com/vuejs/language-tools/discussions/393#discussioncomment-1213736"
-	click VUE_CLIENT_SYNTACTIC "https://github.com/vuejs/language-tools/discussions/393#discussioncomment-1213736"
-
-	subgraph Embedded Language Services
-	  direction LR
-	  VOLAR_TS_SERVICE
-	  VOLAR_PUG_SERVICE
-	  HTML_SERVICE
-	  CSS_SERVICE
-	  JSON_SERVICE
-	end
-
-	VSC --> VSC_VUE
-	COC --> COC_VUE
-	NEO --> NEO_VUE
-	SUBLIME --> SUBLIME_VUE
-	ATOM --> ATOM_VUE
-	EMACS --> EMACS_VUE
-	NOVA --> NOVA_VUE
-	VIM --> VIM_VUE
-	LAPCE --> LAPCE_VUE
-
-	VSC_VUE --> VUE_CLIENTS
-	COC_VUE --> VUE_CLIENTS
-	NEO_VUE --> VUE_CLIENTS
-	SUBLIME_VUE --> VUE_CLIENTS
-	ATOM_VUE --> VUE_CLIENTS
-	EMACS_VUE --> VUE_CLIENTS
-	NOVA_VUE --> VUE_CLIENTS
-	VIM_VUE --> VUE_CLIENTS
-	LAPCE_VUE --> VUE_CLIENTS
-
-	VUE_CLIENTS -- Language Server Protocol --> VOLAR_VUE_SERVER
-
-	VSC --> VSC_TS
-	VSC_TS --> VSC_TSVP
-	VSC_TSVP --> TS_VUE_PLUGIN
-	VOLAR_VUE_SERVER --> VOLAR_VUE_SERVICE
-	VUE_TSC --> VOLAR_VUE_TS
-	%% VITE_PLUGIN_CHECKER --> VUE_TSC
-	%% COMPILE_VUE_SFC --> VUE_TSC
-	TS_VUE_PLUGIN --> VOLAR_VUE_TS
-
-	VUE_REPL --> MONACO_VOLAR
-	MONACO_VOLAR --> VOLAR_VUE_SERVICE
-
-	%% VOLAR_VUE_TS --> TS
-	VUE_COMPONENT_META --> VOLAR_VUE_CORE
-	VOLAR_VUE_TS --> VOLAR_VUE_CORE
-
-	VOLAR_VUE_SERVICE --> VOLAR_VUE_CORE
-	VOLAR_VUE_SERVICE --> VOLAR_TS_SERVICE
-	VOLAR_VUE_SERVICE --> VOLAR_PUG_SERVICE
-	VOLAR_VUE_SERVICE --> HTML_SERVICE
-	VOLAR_VUE_SERVICE --> CSS_SERVICE
-	VOLAR_VUE_SERVICE --> JSON_SERVICE
+ subgraph subGraph1["Language Service Plugins"]
+    direction LR
+        VOLAR_TS_SERVICE["TypeScript"]
+        VOLAR_PUG_SERVICE["Pug"]
+        HTML_SERVICE["HTML"]
+        CSS_SERVICE["CSS"]
+        JSON_SERVICE["JSON"]
+        EMMET_SERVICE["Emmet"]
+  end
+ subgraph subGraph2["VSCode Extensions"]
+    direction TB
+        VSC_VUE["Vue Extension"]
+        VSC_TS["TypeScript Extension"]
+  end
+ subgraph subgraph_iuodo42oc["Third Party Tools"]
+        NUXT_META["nuxt-component-meta"]
+        STORYBOOK["storybook"]
+        CHECKER["vite-plugin-checker"]
+        DTS["vite-plugin-dts"]
+        SFC_PLAYGROUND["@vue/sfc-playground"]
+        n6["@vue/repl"]
+        nv["@vue/sfc-playground"]
+  end
+ subgraph subGraph4["IDEs"]
+    direction TB
+        VSC["VSCode"]
+        COC["coc.nvim"]
+        NEO["Neovim"]
+        SUBLIME["Sublime"]
+        ATOM["Atom"]
+        EMACS["Emacs"]
+        NOVA["Nova"]
+        VIM["vim-lsp"]
+        LAPCE["Lapce"]
+        n4["WebStorm"]
+  end
+    VSC -- Plug-in --> VSC_VUE
+    VSC -- Built-in --> VSC_TS
+    COC -- Plug-in --> COC_VUE["coc-volar"]
+    NEO -- Plug-in --> NEO_VUE["nvim-lspconfig"]
+    SUBLIME -- Plug-in --> SUBLIME_VUE["LSP-volar"]
+    ATOM -- Plug-in --> ATOM_VUE["atom-ide-volar"]
+    EMACS -- Plug-in --> EMACS_VUE["lsp-volar"]
+    NOVA -- Plug-in --> NOVA_VUE["nova-vue"]
+    VIM -- Plug-in --> VIM_VUE["vim-lsp-settings"]
+    LAPCE -- Plug-in --> LAPCE_VUE["lapce-vue"]
+    VOLAR_VUE_SERVER["@vue/language-server"] -. Depends on ..-> VOLAR_VUE_SERVICE["@vue/language-service"]
+    VUE_TSC["vue-tsc"] -..-> VOLAR_VUE_CORE["@vue/language-core"]
+    VUE_COMPONENT_META["vue-component-meta"] -. Depends on ..-> VOLAR_VUE_CORE
+    VOLAR_VUE_SERVICE -. Depends on ..-> VOLAR_VUE_CORE & subGraph1
+    TS_VUE_PLUGIN["@vue/typescript-plugin"] -. Depends on ..-> VOLAR_VUE_CORE
+    VSC_VUE <-- LSP --> VOLAR_VUE_SERVER
+    COC_VUE <-- LSP --> VOLAR_VUE_SERVER
+    NEO_VUE <-- LSP --> VOLAR_VUE_SERVER
+    SUBLIME_VUE <-- LSP --> VOLAR_VUE_SERVER
+    ATOM_VUE <-- LSP --> VOLAR_VUE_SERVER
+    EMACS_VUE <-- LSP --> VOLAR_VUE_SERVER
+    NOVA_VUE <-- LSP --> VOLAR_VUE_SERVER
+    VIM_VUE <-- LSP --> VOLAR_VUE_SERVER
+    LAPCE_VUE <-- LSP --> VOLAR_VUE_SERVER
+    VSC_VUE -. Depends on .-> TS_VUE_PLUGIN
+    VSC_VUE -. Provides @vue/typescript-plugin .-> VSC_TS
+    NUXT_META -. Depends on ..-> VUE_COMPONENT_META
+    STORYBOOK -. Depends on ..-> VUE_COMPONENT_META
+    CHECKER -. Depends on ..-> VUE_TSC
+    DTS -. Depends on ..-> VUE_TSC
+    SFC_PLAYGROUND -. Depends on ..-> VOLAR_VUE_SERVICE
+    n4 <-- LSP --> VOLAR_VUE_SERVER
+    n6 -. Depends on .-> VOLAR_VUE_SERVICE
+    nv -. Depends on .-> n6
+    style VSC_VUE fill:#FFD600
+    style VOLAR_VUE_SERVER fill:#FFD600
+    style VOLAR_VUE_SERVICE fill:#FFD600
+    style VUE_TSC fill:#FFD600
+    style VOLAR_VUE_CORE fill:#FFD600
+    style VUE_COMPONENT_META fill:#FFD600
+    style subGraph1 fill:none
+    style TS_VUE_PLUGIN fill:#FFD600
+    style subgraph_iuodo42oc fill:none
+    style subGraph2 fill:none
+    style subGraph4 fill:none
 ```
 
 ---