add DataContractSpecification.to_mermaid() feature to project an EntityRelationship Diagram as mermaid into the html/catalog export

[dmaresma]

To entertain more the html/catalog export mode, is possible to add the Entity Relation ship diagram visualization ?

Add a method :

   def to_mermaid(self) -> str | None:
        mmd_entity = "erDiagram\n\t"
        mmd_references = []
        try:
            for model_name, model in self.models.items():
                entity_block=""
                for field_name, field in model.fields.items():
                    entity_block += f"\t{ field_name.replace("#","Nb").replace(" ","_").replace("/","by")}{'🔑' if field.primaryKey or (field.unique and field.required) else ''}{'⌘' if field.references else''} {field.type}\n"
                    if field.references:
                        mmd_references.append(f'"📑{field.references.split(".")[0] if "." in field.references else ""}"' + "}o--{ ||"+f'"📑{model_name}"')
                mmd_entity+= f'\t"📑{model_name}"'+'{\n' + entity_block + '}\n'

            if mmd_entity == "":
                return None
            else:
                return f"{mmd_entity}\n"
        except Exception as e:
           print(f"error : {e}, {self}")
           return None

and

  <div class="flex items-center gap-x-4">
    <div class="diagram-container" id="diagram-container">
      <pre class="mermaid">
        {{ datacontract.diagram() }}
      </pre>
    </div>
    <script type="module">
      import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs';
      mermaid.initialize({ startOnLoad: false });
      await mermaid.run({
        querySelector: '.mermaid',
        postRenderCallback: (id) => {
          const container = document.getElementById("diagram-container");
          const svgElement = container.querySelector("svg");

          // Initialize Panzoom
          const panzoomInstance = Panzoom(svgElement, {
            maxScale: 5,
            minScale: 0.5,
            step: 0.1,
          });

          // Add mouse wheel zoom
          container.addEventListener("wheel", (event) => {
            panzoomInstance.zoomWithWheel(event);
          });
        }
      });
    </script>
  </div>

with <script src="https://unpkg.com/@panzoom/[email protected]/dist/panzoom.min.js"></script>

[jochenchrist]

I would suggest, we start with a mermaid exporter. We then can discuss to add the diagram to the HTML export.

datacontract export --format mermaid

[jochenchrist]

to_mermaid(self)

Should not be part of the core DataContract class. The exporter code belongs into an exporter/mermaid_converter.py file.

[jochenchrist]

Would you like to propose a pull request?