在前端开发中,我们常常需要在文档中使用 UML 图表来展示或者分析一些数据或者流程。这时候,我们可以使用 markdown-it-nomnoml 这个 npm 包来方便的生成 UML 图表。本篇文章将会介绍如何使用 markdown-it-nomnoml 包来生成 UML 图表的教程。
什么是 markdown-it-nomnoml
markdown-it-nomnoml 是一个 Markdown 渲染器,它可以将 Markdown 的文本转换成 HTML,同时支持使用 nomnoml 语言描述 UML 图表。nomnoml 是一种基于文本的 UML 图表描述语言,它使用简单、方便,并且不需要任何额外的软件或工具。
前置知识
使用 markdown-it-nomnoml 包之前,需要具备以下知识:
- HTML 和 CSS 基础知识
- Node.js 版本 8.x 及以上
- npm 或者 yarn 的基础知识
- Markdown 语法的基础知识
安装 markdown-it-nomnoml
在使用 markdown-it-nomnoml 之前,需要先安装该包。可以使用 npm 或者 yarn 进行安装。
# 使用 npm npm install --save markdown-it-nomnoml # 使用 yarn yarn add markdown-it-nomnoml
使用 markdown-it-nomnoml
使用 markdown-it-nomnoml 包时,需要先引入该包,并且使用配置项来设置语言和样式等参数。
const md = require('markdown-it')({ html: true, linkify: true }); const nomnoml = require('nomnoml'); md.use(require('markdown-it-nomnoml'), { nomnoml });
其中,markdown-it
是 markdown-it-nomnoml 依赖的一个 Markdown 渲染库,nomnoml
是 UML 图表描述语言。
使用时,只需要在 Markdown 中插入 nomnoml 语言的代码即可:
-- -------------------- ---- ------- ---------- ----------------- -------- ----------------------- ------------ ---------------------- ---------- --------- -- ------------ ------------------------------ ---------- --------- -- ------------ ------------------------------ ---------- --------- -- ----------- -- ----------- -
-- -------------------- ---- ------- ------------------- --- --- -- ---- -------------- ----- ---------- ----------------- -------- ----------------------- ------------ ---------------------- ---------- --------- -- ------------ ------------------------------ ---------- --------- -- ------------ ------------------------------ ---------- --------- -- ----------- -- ----------- -
-- -------------------- ---- ------- ------------------ --- --- ----------- ------- ------------------------------------- -- -- ----------- --- - ------------------- --- --- ------------ --- ------------------------------ ----------------------------- -------- ------ - ------------------------------------------------------------------------------ -------- ------------------------------------------------------------------------------------------------------------------------