IntelliJ IDEA中使用markdown画流程图

  |   0 评论   |   260 浏览

背景

初体验

安装 Scene Builder

下载安装:https://gluonhq.com/products/scene-builder/Download Scene Builder for Java 8

IntelliJ IDEA -> Preferences -> Languages and Frameworks -> JavaFX 中的
"Path to SceneBuilder" 设置为 "/Applications/SceneBuilder.app"

禁用掉默认的markdown插件

IntelliJ IDEA --> Plugins --> Markdown --> Disable

安装 idea-multimarkdown 插件

IntelliJ IDEA --> Plugins --> Markdown Navigator --> Install (35.4M)

也可以直接下载,得到文件idea-multimarkdown.2.9.11.zip:

IntelliJ IDEA --> Plugins --> Install Plugin from DISK --> idea-multimarkdown.2.9.11.zip

然后按照提示,重启 IDEA。

更多内容可以看:idea-multimarkdown Parser-Settings

安装 gfm 插件

IntelliJ IDEA --> Plugins --> gfm --> Install (226.5M)

也可以直接下载,得到文件 gfm-plugin-0.2.0.zip

IntelliJ IDEA --> Plugins --> Install Plugin from DISK --> gfm-plugin-0.2.0.zip

然后按照提示,重启 IDEA。

配置:IntelliJ IDEA --> Preferences --> Other Settings --> Gfm settings --> Rendering engine --> 由 JxBrowser 改为 JavaFX WebView

配置

IntelliJ IDEA --> Preferences --> Languages & Frameworks --> Markdown --> Parser --> Processor Extensions

勾选:GitLab charts (Mermaid),如果需要公式的话,也勾引上 GitLab math (Ketex)

如果不能勾选,需要注意下,这个是付费功能。。。请自行搜索解决方案

测试mermaid语法

mermaid
graph TD
   A --> B

效果见下图

graph TD
   A --> B

语法

流程图方向

  • TB 从上到下
  • BT 从下到上
  • RL 从右到左
  • LR 从左到右
  • TD 同TB

测试Katex语法

% \f is defined as f(#1) using the macro
\f{x} = \int_{-\infty}^\infty
    \hat \f\xi\,e^{2 \pi i \xi x}
    \,d\xi

效果图忽略,在IDEA中可以显示出来公式。

参考