vitepress

vitepress copied to clipboard

Replaces #930 for alpha

You can draw diagrams by using Mermaid.

Input

::: mermaid
sequenceDiagram
User->>Server: Request page
::: 

Output

sequenceDiagram
  User->>Server: Request page

There are a some document is not defined errors on the console while building (probably need to initialize mermaid onMounted). Also, I have another concern about this PR - bundling mermaid will drastically increase the bundle size. (Their own site is not using Mermaid AFAICT, they have used cli-generated pngs everywhere IG.) GitHub dynamically loads mermaid and then initializes it, we probably can do something like that. This needs some discussion to figure out the best way possible.

@brc-dd I replaced watchEffect with onMounted in Mermaid component. It worked, thanks! For the issue of increasing bundle size, can this be solved by importing mermaid dynamically?

For the issue of increasing bundle size, can this be solved by importing mermaid dynamically?

Most likely yes. Currently while building you'll be seeing some large chunk warnings on terminal. They shouldn't be there.

Yeah, I saw the following warnings.

(!) Some chunks are larger than 500 KiB after minification. Consider:

• Using dynamic import() to code-split the application
• Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/guide/en/#outputmanualchunks
• Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.

I will try the above solutions.

@brc-dd Now, loading mermaid is disabled by default. When disabled, the warnings also disappears. It can be enabled by setting the markdown.mermaid option to true in .vitepress/config.ts.

Oh.. If I knew it I would make an PR not a plugin!😁

something you probably is missing.. In my plugin there are some features that I really like.

• you can set the theme in the frontmatter
• you use fences ``` for default charts
• you can use ```mmd to show the code instead of the chart.
• you can use images in the charts!
• the isDark should be updated when changed so it is not only onMounted.

I can help improve this one. if it can be in the vitepress itself. just let me know. But I really thought it should be an plugin reading the orientations in the docs 🤔.

I'm redoing the mermaid docs with it.. you can check an demo (just to showcase) in here

Yeah I also think this should be VitePress plugin or something 🤔 I think it's too heavy to be included in the core, and if we have this, we can easily imagine getting tons of PRs to include these kind of custom drawing libs 😅

vitepress-plugin-mermaid looks good, and I agree with @kiaking's opinion. I just created this PR because I thought mermaid is common, adopted by major services like Github, etc., so I'm closing the PR.