用 Mermaid 画流程图、时序图很方便,但默认渲染出来的图表不够美观,而且在终端环境下根本没法显示。

在 GitHub 上发现一个刚开源的项目 beautiful-mermaid ,专门解决 Mermaid 图表的渲染问题,既能生成精美的 SVG,也能输出终端友好的 ASCII 字符画。

基于纯 TypeScript 实现,无需 DOM 依赖,支持流程图、状态图、时序图、类图和 ER 图五种常见图表类型。

GitHub:http://github.com/lukilabs/beautiful-mermaid

同时内置 15 套精选主题,可以自定义强调色、边框色等细节,还支持直接使用任何 VS Code 主题配色。

另外,所有颜色都通过 CSS 变量控制,切换主题不需要重新渲染,直接修改变量即可实时生效。