Mermaid Flowchart Legend Style

Question

There are three parts to this question: formatting a text label in a subgraph, centering the output with hidden objects, and file layout.

• How can the label text background be removed from within the legend group? A similar question at Mermaid - How to set the labels style for flowchart nodes has an answer without any explanation.

• The flowchart is top-down but the legend is left-right, so the legend had to be put in a subgraph with a final hidden node on the right side. This causes whitespace on the right side of the output so the image is not centered. Can the image be generated without the whitespace so it sits in the center of the output?

• It is convenient to keep the style and code in a single file but any comments on managing style are welcome.

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

Is the easiest workaround for this. (Under "Config" in the online editor.)

https://github.com/mermaid-js/mermaid/issues/3121 has been open for a year.