安装mermaid的本地版本

　　这几天在学习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，完美收工。

posted @ 2021-02-07 21:49 叕叒双又阅读(2392) 评论(0) 编辑收藏举报

刷新页面返回顶部

安装mermaid的本地版本

公告