IntelliJ IDEA中使用markdown画流程图

  |   0 评论   |   0 浏览

背景

略

初体验

安装 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中可以显示出来公式。

参考