PlantUML and Mermaid, especially in Markdown .md files

TL;NR #

1. 安装 vscode plugins: 1. Mermaid Preview - by Mermaid OSS; 2. Markdown Plantuml Preview - by myml .

1. 创建 .md , 内容来自 k-means.md · SinoSolomon/diagram-demo - Gitee.com 》 “一键复制”.
2. vscode 中 Ctrl+Shift+P 》”在侧边栏打开预览“：

4. 预览效果： README.md · SinoSolomon/diagram-demo - Gitee.com.

MERMAID #

Simple to use, not for professional usages.

Selected Plugins/Tools #

• VSCode: Live preview in Visual Studio VSCode plugins:
  • 【suggested! for .md】: Mermaid Preview - by Mermaid OSS - Visual Studio Marketplace.
  • With in .md file: Ctrl+Shift+P, “Open Preview on the Side / 侧边打开预览 “.

PLANT UML (PUML) #

More professional.

Intro #

中文教程（官方网站）： plantuml.com/zh

PlantUML is a convinient tool to make diagrams using UML language/format, such as sequence diagrams, use cases, flow diagrams etc.

pic-ref

Selected Plugins/Tools #

• VSCode: Live preview in Visual Studio VSCode plugins:
  • 【suggested! for .md, remote server by default】: Markdown Plantuml Preview - by myml - Visual Studio Marketplace
    • With in .md file: Ctrl+Shift+P, “Open Preview on the Side / 侧边打开预览 “.
    • (ps: for randomly rendering failures, just refresh or use: PlantUML Web Server).
  • 【for .puml extension files only. needs to config server or install local software】jebbs.plantuml w/ encoded url. (Tip1: render by either local (suggested, needs java+graphviz) or server. Tip2: config “server” as the bold part of: http://www.plantuml.com/plantuml/uml/xxxyyyzzz)
• PlantText.com: shareable source code (encoded url). A site that can support PNG, SVG, ASCII/TXT, save/generate encoded url (“Edit” button), and have many examples
  • Sunny’s puml sequence diagram template v5 by PlantText (bitly backup bit.ly/s_puml-seq-v5)
• Font OK + History, NO sharable code, Real-time rendering, 中文界面 app.timelessq.com
• Font OK + History, NO sharable code kkeisuke.com
• A standard/plain/vanila editor w/ history: https://plantuml-editor.kkeisuke.com/
• PlantUML vanila editor w/ shareable source code (encoded url) plantuml.com/plantuml
• PlantUML official self-host server or docker
• A previewer from github w/ history: sujoyu.github.io
• Others collected by the official web: http://plantuml.com/running
• Atom has a community maintained plantuml syntax highlighter and viewer.
• Live preview online vizard.io (discontinued) & code

Alternatives that do NOT require external web services [ref]:

• for flow/Gantt/sequence diagrams, “Mermaid” is also a good choice.
  • Good:
    • easier/simpler/less than writing puml.
    • real-time online rendering with js.
    • CJK/non-UTF ok.
  • Bad:
    • all symbols should use html codes.
    • not so professional as puml.
    • no professional class diagram
  • Live editors:
    • All basic features, REAL EDITOR! detailed editor MermaidFlow.APP ( link w/o content )
    • All basic features, link w/ content / img: Mermaid.Live, previously: mermaid-js.github.io
    • All features, rich links, md etc.: mermaid-js.github.io beta (site down …)
    • mermaid.d.foundation , red-colored bg, content-link not working, NOT suggested.

Others:

• yUML is easier to use.