这几天在学习typora时，觉得markdown的做图表功能太强大了，但是在做到关联图（ER图），发现typora对其支持有问题，打算装个mermaid(美人鱼)，过程可谓是步步有坑，也学我用的比较少，少见多怪，记录如下：
0、安装yarn
sudo pacman -S yarn
1、获取代码：
git clone https://github.com/mermaid-js/mermaid-live-editor.git
2、进入目录
cd mermaid-live-editor/
不要查看，否则就会误入歧途：
我就是ls了下，发现目录下有
bin docs pull_request_template.md webpack.config.js CODE_OF_CONDUCT.md LICENSE README.md yarn.lock Dockerfile package.json src
进入到bin目录，居然有个可执行文件，还以为就是个绿色软件，兴冲冲的执行，根本不是。src下也不是常见的可以make的代码
3、开始安装
yarn install
yarn install v1.22.10 [1/4] Resolving packages... [2/4] Fetching packages... info fsevents@1.2.9: The platform "linux" is incompatible with this module. info "fsevents@1.2.9" is an optional dependency and failed compatibility check. Excluding it from installation. [3/4] Linking dependencies... [4/4] Building fresh packages... Done in 98.58s.
这个坑人的提示中有个failed的，让我一顿乱找，然而，什么也没有，
不过，喜欢用新版本（beta）的同学，可以执行命令：
yarn install --update-checksums 4、应用开发
yarn dev 1 yarn dev 2 yarn run v1.22.10 3 $ webpack serve --content-base docs 4 ℹ ｢wds｣: Project is running at http://localhost:8080/ 5 ℹ ｢wds｣: webpack output is served from / 6 ℹ ｢wds｣: Content not from webpack is served from docs 7 ℹ ｢wdm｣: Hash: 4fb8c39a9387a024ee49 8 Version: webpack 4.41.2 9 Time: 8293ms 10 Built at: 2021/02/07 下午9:16:17 11 Asset Size Chunks Chunk Names 12 0.0.js 10.4 KiB 0 [emitted] 13 0.0.js.map 12.5 KiB 0 [emitted] [dev] 14 1.1.js 14.7 KiB 1 [emitted] 15 1.1.js.map 17.9 KiB 1 [emitted] [dev] 16 10.10.js 4.17 KiB 10 [emitted] 17 10.10.js.map 4.49 KiB 10 [emitted] [dev] 18 11.11.js 5.03 KiB 11 [emitted] 19 11.11.js.map 5.69 KiB 11 [emitted] [dev] 20 12.12.js 17.7 KiB 12 [emitted] 21 12.12.js.map 22.1 KiB 12 [emitted] [dev] 22 13.13.js 7.82 KiB 13 [emitted] 23 13.13.js.map 9.13 KiB 13 [emitted] [dev] 24 14.14.js 9.49 KiB 14 [emitted] 25 14.14.js.map 11.5 KiB 14 [emitted] [dev] 26 15.15.js 2.99 KiB 15 [emitted] 27 15.15.js.map 2.76 KiB 15 [emitted] [dev] 28 16.16.js 7.72 KiB 16 [emitted] 29 16.16.js.map 9.27 KiB 16 [emitted] [dev] 30 17.17.js 8.72 KiB 17 [emitted] 31 17.17.js.map 10.3 KiB 17 [emitted] [dev] 32 18.18.js 4.82 KiB 18 [emitted] 33 18.18.js.map 5.29 KiB 18 [emitted] [dev] 34 19.19.js 6.46 KiB 19 [emitted] 35 19.19.js.map 7.5 KiB 19 [emitted] [dev] 36 2.2.js 1.55 MiB 2 [emitted] 37 2.2.js.map 1.7 MiB 2 [emitted] [dev] 38 20.20.js 6.42 KiB 20 [emitted] 39 20.20.js.map 7.46 KiB 20 [emitted] [dev] 40 21.21.js 5.49 KiB 21 [emitted] 41 21.21.js.map 6.11 KiB 21 [emitted] [dev] 42 22.22.js 13.6 KiB 22 [emitted] 43 22.22.js.map 15.9 KiB 22 [emitted] [dev] 44 23.23.js 7 KiB 23 [emitted] 45 23.23.js.map 7.88 KiB 23 [emitted] [dev] 46 24.24.js 10.2 KiB 24 [emitted] 47 24.24.js.map 11.8 KiB 24 [emitted] [dev] 48 25.25.js 2.97 KiB 25 [emitted] 49 25.25.js.map 3.05 KiB 25 [emitted] [dev] 50 26.26.js 6.69 KiB 26 [emitted] 51 26.26.js.map 7.74 KiB 26 [emitted] [dev] 52 27.27.js 13.7 KiB 27 [emitted] 53 27.27.js.map 16.7 KiB 27 [emitted] [dev] 54 28.28.js 7.31 KiB 28 [emitted] 55 28.28.js.map 8.58 KiB 28 [emitted] [dev] 56 29.29.js 6.82 KiB 29 [emitted] 57 29.29.js.map 7.97 KiB 29 [emitted] [dev] 58 3.3.js 908 KiB 3 [emitted] 59 3.3.js.map 981 KiB 3 [emitted] [dev] 60 30.30.js 5.61 KiB 30 [emitted] 61 30.30.js.map 6.31 KiB 30 [emitted] [dev] 62 31.31.js 5.18 KiB 31 [emitted] 63 31.31.js.map 5.9 KiB 31 [emitted] [dev] 64 32.32.js 8.96 KiB 32 [emitted] 65 32.32.js.map 10.3 KiB 32 [emitted] [dev] 66 33.33.js 6.25 KiB 33 [emitted] 67 33.33.js.map 7.12 KiB 33 [emitted] [dev] 68 34.34.js 9.42 KiB 34 [emitted] 69 34.34.js.map 11.4 KiB 34 [emitted] [dev] 70 35.35.js 26.1 KiB 35 [emitted] 71 35.35.js.map 32.8 KiB 35 [emitted] [dev] 72 36.36.js 5.36 KiB 36 [emitted] 73 36.36.js.map 6.09 KiB 36 [emitted] [dev] 74 37.37.js 6.73 KiB 37 [emitted] 75 37.37.js.map 8.05 KiB 37 [emitted] [dev] 76 38.38.js 5 KiB 38 [emitted] 77 38.38.js.map 5.66 KiB 38 [emitted] [dev] 78 39.39.js 16.5 KiB 39 [emitted] 79 39.39.js.map 20.5 KiB 39 [emitted] [dev] 80 4.4.js 454 KiB 4 [emitted] 81 4.4.js.map 452 KiB 4 [emitted] [dev] 82 40.40.js 30.8 KiB 40 [emitted] 83 40.40.js.map 38.5 KiB 40 [emitted] [dev] 84 41.41.js 17.9 KiB 41 [emitted] 85 41.41.js.map 21.6 KiB 41 [emitted] [dev] 86 42.42.js 20.2 KiB 42 [emitted] 87 42.42.js.map 25.3 KiB 42 [emitted] [dev] 88 43.43.js 26 KiB 43 [emitted] 89 43.43.js.map 30.8 KiB 43 [emitted] [dev] 90 44.44.js 7.9 KiB 44 [emitted] 91 44.44.js.map 9.21 KiB 44 [emitted] [dev] 92 45.45.js 11.8 KiB 45 [emitted] 93 45.45.js.map 14.3 KiB 45 [emitted] [dev] 94 46.46.js 7.33 KiB 46 [emitted] 95 46.46.js.map 8.3 KiB 46 [emitted] [dev] 96 47.47.js 6.45 KiB 47 [emitted] 97 47.47.js.map 7.51 KiB 47 [emitted] [dev] 98 48.48.js 16.9 KiB 48 [emitted] 99 48.48.js.map 19.9 KiB 48 [emitted] [dev] 100 49.49.js 7.49 KiB 49 [emitted] 101 49.49.js.map 8.98 KiB 49 [emitted] [dev] 102 5.5.js 74.2 KiB 5 [emitted] 103 5.5.js.map 75.9 KiB 5 [emitted] [dev] 104 50.50.js 20.3 KiB 50 [emitted] 105 50.50.js.map 24.8 KiB 50 [emitted] [dev] 106 51.51.js 7.28 KiB 51 [emitted] 107 51.51.js.map 8.17 KiB 51 [emitted] [dev] 108 52.52.js 20.1 KiB 52 [emitted] 109 52.52.js.map 24.1 KiB 52 [emitted] [dev] 110 53.53.js 8.2 KiB 53 [emitted] 111 53.53.js.map 9.97 KiB 53 [emitted] [dev] 112 54.54.js 4.37 KiB 54 [emitted] 113 54.54.js.map 4.66 KiB 54 [emitted] [dev] 114 55.55.js 13.7 KiB 55 [emitted] 115 55.55.js.map 16 KiB 55 [emitted] [dev] 116 56.56.js 3.89 KiB 56 [emitted] 117 56.56.js.map 4.17 KiB 56 [emitted] [dev] 118 57.57.js 10.6 KiB 57 [emitted] 119 57.57.js.map 13 KiB 57 [emitted] [dev] 120 58.58.js 6.3 KiB 58 [emitted] 121 58.58.js.map 7.36 KiB 58 [emitted] [dev] 122 59.59.js 32 KiB 59 [emitted] 123 59.59.js.map 39.6 KiB 59 [emitted] [dev] 124 6.6.js 13.9 KiB 6 [emitted] 125 6.6.js.map 14.7 KiB 6 [emitted] [dev] 126 60.60.js 6.15 KiB 60 [emitted] 127 60.60.js.map 6.97 KiB 60 [emitted] [dev] 128 61.61.js 32.2 KiB 61 [emitted] 129 61.61.js.map 40.4 KiB 61 [emitted] [dev] 130 62.62.js 12.6 KiB 62 [emitted] 131 62.62.js.map 15.6 KiB 62 [emitted] [dev] 132 63.63.js 7.96 KiB 63 [emitted] 133 63.63.js.map 9.42 KiB 63 [emitted] [dev] 134 64.64.js 7.05 KiB 64 [emitted] 135 64.64.js.map 8.47 KiB 64 [emitted] [dev] 136 65.65.js 13.2 KiB 65 [emitted] 137 65.65.js.map 15.7 KiB 65 [emitted] [dev] 138 66.66.js 10.7 KiB 66 [emitted] 139 66.66.js.map 12.2 KiB 66 [emitted] [dev] 140 67.67.js 10.8 KiB 67 [emitted] 141 67.67.js.map 13 KiB 67 [emitted] [dev] 142 68.68.js 3.75 KiB 68 [emitted] 143 68.68.js.map 4.01 KiB 68 [emitted] [dev] 144 69.69.js 7.23 KiB 69 [emitted] 145 69.69.js.map 8.42 KiB 69 [emitted] [dev] 146 7.7.js 19.1 KiB 7 [emitted] 147 7.7.js.map 25.2 KiB 7 [emitted] [dev] 148 8.8.js 8.69 KiB 8 [emitted] 149 8.8.js.map 10.5 KiB 8 [emitted] [dev] 150 9.9.js 2.83 KiB 9 [emitted] 151 9.9.js.map 2.75 KiB 9 [emitted] [dev] 152 bundle.js 11.3 MiB bundle [emitted] bundle 153 bundle.js.map 10.4 MiB bundle [emitted] [dev] bundle 154 codicon.ttf 59.6 KiB [emitted] 155 editor.worker.js 452 KiB [emitted] 156 editor.worker.js.map 461 KiB [emitted] [dev] 157 json.worker.js 871 KiB [emitted] 158 json.worker.js.map 883 KiB [emitted] [dev] 159 Entrypoint bundle = bundle.js bundle.js.map 160 [1] multi (webpack)-dev-server/client?http://localhost:8080 ./src/main.js 40 bytes {bundle} [built] 161 [./node_modules/ansi-html/index.js] 4.16 KiB {bundle} [built] 162 [./node_modules/ansi-regex/index.js] 135 bytes {bundle} [built] 163 [./node_modules/html-entities/lib/index.js] 449 bytes {bundle} [built] 164 [./node_modules/strip-ansi/index.js] 161 bytes {bundle} [built] 165 [./node_modules/webpack-dev-server/client/index.js?http://localhost:8080] (webpack)-dev-server/client?http://localhost:8080 4.29 KiB {bundle} [built] 166 [./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.51 KiB {bundle} [built] 167 [./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.53 KiB {bundle} [built] 168 [./node_modules/webpack-dev-server/client/utils/createSocketUrl.js] (webpack)-dev-server/client/utils/createSocketUrl.js 2.91 KiB {bundle} [built] 169 [./node_modules/webpack-dev-server/client/utils/log.js] (webpack)-dev-server/client/utils/log.js 964 bytes {bundle} [built] 170 [./node_modules/webpack-dev-server/client/utils/reloadApp.js] (webpack)-dev-server/client/utils/reloadApp.js 1.59 KiB {bundle} [built] 171 [./node_modules/webpack-dev-server/client/utils/sendMessage.js] (webpack)-dev-server/client/utils/sendMessage.js 402 bytes {bundle} [built] 172 [./node_modules/webpack/hot sync ^./log$] (webpack)/hot sync nonrecursive ^./log$ 170 bytes {bundle} [built] 173 [./src/App.svelte] 2.03 KiB {bundle} [built] 174 [./src/main.js] 137 bytes {bundle} [built] 175 + 2049 hidden modules 176 Child vs/editor/editor: 177 Asset Size Chunks Chunk Names 178 editor.worker.js 452 KiB main [emitted] main 179 editor.worker.js.map 461 KiB main [emitted] [dev] main 180 Entrypoint main = editor.worker.js editor.worker.js.map 181 [./node_modules/monaco-editor/esm/vs/base/common/arrays.js] 6.71 KiB {main} [built] 182 [./node_modules/monaco-editor/esm/vs/base/common/diff/diff.js] 44.6 KiB {main} [built] 183 [./node_modules/monaco-editor/esm/vs/base/common/errors.js] 2.65 KiB {main} [built] 184 [./node_modules/monaco-editor/esm/vs/base/common/lifecycle.js] 5.14 KiB {main} [built] 185 [./node_modules/monaco-editor/esm/vs/base/common/platform.js] 4.33 KiB {main} [built] 186 [./node_modules/monaco-editor/esm/vs/base/common/types.js] 4.14 KiB {main} [built] 187 [./node_modules/monaco-editor/esm/vs/base/common/uri.js] 20.6 KiB {main} [built] 188 [./node_modules/monaco-editor/esm/vs/base/common/worker/simpleWorker.js] 9.87 KiB {main} [built] 189 [./node_modules/monaco-editor/esm/vs/editor/common/core/position.js] 3.8 KiB {main} [built] 190 [./node_modules/monaco-editor/esm/vs/editor/common/core/range.js] 13.4 KiB {main} [built] 191 [./node_modules/monaco-editor/esm/vs/editor/common/diff/diffComputer.js] 19.9 KiB {main} [built] 192 [./node_modules/monaco-editor/esm/vs/editor/common/model/mirrorTextModel.js] 4.79 KiB {main} [built] 193 [./node_modules/monaco-editor/esm/vs/editor/common/model/wordHelper.js] 4.07 KiB {main} [built] 194 [./node_modules/monaco-editor/esm/vs/editor/common/services/editorSimpleWorker.js] 19.2 KiB {main} [built] 195 [./node_modules/monaco-editor/esm/vs/editor/editor.worker.js] 1.02 KiB {main} [built] 196 + 21 hidden modules 197 Child vs/language/json/jsonWorker: 198 Asset Size Chunks Chunk Names 199 json.worker.js 871 KiB main [emitted] main 200 json.worker.js.map 883 KiB main [emitted] [dev] main 201 Entrypoint main = json.worker.js json.worker.js.map 202 [./node_modules/monaco-editor/esm/vs/base/common/arrays.js] 6.71 KiB {main} [built] 203 [./node_modules/monaco-editor/esm/vs/base/common/diff/diff.js] 44.6 KiB {main} [built] 204 [./node_modules/monaco-editor/esm/vs/base/common/errors.js] 2.65 KiB {main} [built] 205 [./node_modules/monaco-editor/esm/vs/base/common/lifecycle.js] 5.14 KiB {main} [built] 206 [./node_modules/monaco-editor/esm/vs/base/common/platform.js] 4.33 KiB {main} [built] 207 [./node_modules/monaco-editor/esm/vs/base/common/types.js] 4.14 KiB {main} [built] 208 [./node_modules/monaco-editor/esm/vs/base/common/uri.js] 20.6 KiB {main} [built] 209 [./node_modules/monaco-editor/esm/vs/base/common/worker/simpleWorker.js] 9.87 KiB {main} [built] 210 [./node_modules/monaco-editor/esm/vs/editor/common/core/position.js] 3.8 KiB {main} [built] 211 [./node_modules/monaco-editor/esm/vs/editor/common/services/editorSimpleWorker.js] 19.2 KiB {main} [built] 212 [./node_modules/monaco-editor/esm/vs/editor/editor.worker.js] 1.02 KiB {main} [built] 213 [./node_modules/monaco-editor/esm/vs/language/json/_deps/vscode-json-languageservice/jsonLanguageService.js] 4.09 KiB {main} [built] 214 [./node_modules/monaco-editor/esm/vs/language/json/_deps/vscode-uri/index.js] 23.1 KiB {main} [built] 215 [./node_modules/monaco-editor/esm/vs/language/json/json.worker.js] 628 bytes {main} [built] 216 [./node_modules/monaco-editor/esm/vs/language/json/jsonWorker.js] 11.2 KiB {main} [built] 217 + 48 hidden modules 218 ℹ ｢wdm｣: Compiled successfully.
注意第4行，打开你的浏览器，新建页面，地址栏输入：http://localhost:8080
界面如图：
至此，开发环境搭建完毕。
请看，同样的源码：
```mermaid erDiagram CUSTOMER ||--o{ ORDER : places CUSTOMER{ string name string custNumber string sector } ORDER ||--|{ LINE-ITEM : contains CUSTOMER }|..|{ DELIVERY-ADDRESS : uses ```
typora的结果：
mermaid live editor的结果：
5、保存ER图
点击页面中的copy markdown按钮，将复制下来的链接粘贴到相应的位置，到此位置，完成了Typora的ER图的创建。请同学们看清楚了，应该是typora支持的mermaid的ER还是不够到位，强烈建议画ER图是不要用typora。OK，完美收工。