美人鱼流程图传奇风格

Question

这个问题有三个部分：在子图中格式化文本标签，以隐藏的对象为中心，并进行文件布局。

• 如何从传奇组中删除标签文本背景？ Mermaid如何设置标签样式的类似问题 - 对于流程图节点有一个答案，没有任何解释。

• 流程图是自上而下的，但传说是左右，因此必须将传说放入一个子图中，右侧最终隐藏节点。这会导致输出右侧的空格，因此图像不在中心。可以在没有空格的情况下生成图像，以便它位于输出的中心？

• 将样式和代码保存在一个文件中很方便，但欢迎对管理样式的任何注释。

<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>

<div class="mermaid">

%%{init: {'flowchart' : {'curve' : 'stepBefore'}}}%%

flowchart  TD
  A((A))
  A --- B
  A --- C
  A --- D
  A --- E
  B --- B1
  B --- B2

  %% Legend
  E --- legend
  subgraph legend
    direction LR
    Y --- |Type 1| Z
    Z --- |Type 2| null
  end
  linkStyle 6,7,8 stroke:#0000,stroke-width:0px;

  classDef Type1 fill:lime, font-weight: bolder;
  classDef Type2 fill:yellow, font-weight: bolder;
  class A,B,E,Z Type2;
  class C,D,B1,B2,Y Type1;

  classDef hide fill:#0000,stroke:#0000,stroke-width:0px,color:#0000;
  class legend,null hide;
  classDef hide-font color:#0000;
  class Y,Z hide-font;
  
  </div>

Answer 1

{
  "theme": "neutral"
}

是最简单的解决方法。 （在线编辑中的“ config”下。）

https://github.com/github.com/mermeraid.com/mermeraid.com/mermeraid -JS/Mermaid/essume/3121 开放了一年。