美人鱼流程图传奇风格

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"
}

这是最简单的解决方法。 （在在线编辑器的“配置”下。）

https://github.com/mermaid-js/mermaid/issues/3121已经开放一年了。