Prisma ERD

Prisma ERD is a tool designed to take Prisma schemas and generate visual Entity-Relationship Diagrams (ERDs). You can use the web-based version of the tool at https://prisma-erd.simonknott.de.

If you prefer to integrate this functionality directly into your Prisma workflow as a generator, you can use the prisma-erd-generator built by @keonik.

Once you have received the Mermaid diagram string, you can render it into an HTML element using the mermaid.mermaidAPI.render method.

In this implementation, the renderWithMermaid function takes the Mermaid input string, renders it using a specific svgId, and injects the resulting SVG string into a container element (graphDiv). After rendering, the SVG attributes for height and width are cleared to allow for responsive scaling.

function renderWithMermaid(input: string) {
  mermaid.mermaidAPI.render(
    svgId,
    input,
    (svg: string) => (graphDiv.innerHTML = svg)
  );

  const svgEl = document.getElementById(svgId);
  svgEl.setAttribute("height", undefined);
  svgEl.setAttribute("width", undefined);
}

The application provides a way to transform a Prisma schema into a Mermaid diagram by sending a POST request to the / .netlify/functions/render-dml-to-mermaid endpoint.

To perform the transformation, you must send the raw schema text in the body of a POST request with the Content-Type set to text/plain. The server returns the Mermaid diagram syntax as a plain text string.

fetch("/.netlify/functions/render-dml-to-mermaid", {
  method: "POST",
  body: schemaInput.value,
  headers: {
    "Content-Type": "text/plain",
  },
});