美人鱼架构图中的渲染图标

问题描述 投票：0回答：1

我正在使用官方文档中的example来渲染架构图中的图标，这是预期的输出

enter image description here

但是，当我使用实时编辑器时，图标将不会呈现

enter image description here

还尝试运行 cli 得到相同的结果。我是不是做错了什么？

提前致谢

mermaid
1个回答
0
投票

如文档中所述，架构图仅支持以下图标：

cloud
、
database
、
disk
、
internet
、
server
。

您必须按照此处定义的步骤注册图标：https://mermaid.js.org/config/icons.html

美人鱼实时编辑器似乎不支持加载图标，因此您可能需要运行渲染器。

例如：

<html>
  <body>
    <pre class="mermaid">
        architecture-beta
            group api(logos:aws-lambda)[API]

            service db(logos:aws-aurora)[Database] in api
            service disk1(logos:aws-glacier)[Storage] in api
            service disk2(logos:aws-s3)[Storage] in api
            service server(logos:aws-ec2)[Server] in api

            db:L -- R:server
            disk1:T -- B:server
            disk2:T -- B:db

    </pre>


    <script type="module">
      import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
      mermaid.initialize({ startOnLoad: true });
      
      // copy-pasta from the documentation
      mermaid.registerIconPacks([
        {
          name: 'logos',
          loader: () =>
            fetch('https://unpkg.com/@iconify-json/logos@1/icons.json').then((res) => res.json()),
        },
      ]);

    </script>
  </body>
</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.