Code-Knack 支持流程图、时序图、甘特图了

[lyric]

前文提要： https://www.v2ex.com/t/532704#reply10

图表用的是 Mermaid.js

GitHub： https://github.com/lyricat/code-knack

DEMO： https://lyricat.github.io/code-knack/demo/#

效果如下：

语法很简单，

<pre>
  <code class="language-mermaid,autorun">
graph TD
  A[Christmas] -->|Get money| B(Go shopping)
  B --> C{Let me think}
  C -->|One1| D[Laptop]
  C -->|Two| E[iPhone]
  C -->|Two| E[iPhone]
  C -->|Two| E[iPhone]
  C -->|Three| F[fa:fa-car Car]
  </code>
</pre>

[sundae91]

plantUML 功能和这个有重叠吗？

[lyric]

@sundae91 有。不过我提供了一个 live editor.

[sundae91]

@lyric live editor 是指在线编写？
plantuml 是一套 DSL，网页实现、vs 插件、idea 插件实现都有

[lyric]

@sundae91 使用场景不同。

Code-knack 是个开箱即用的插件，可以挂在随便一个网页里面。比如说 GitBook 或者博客。

[lyric]

比如说 Code-Knack 可以集成 plantuml，这样就可以在 Code-Knack 里渲染 plantuml 输出的图