@rocksoliddigital/payload-lineage 0.2.0 → 0.3.0

package/README.md

@@ -21,6 +21,10 @@ Both are built from the running config on each visit (well under a millisecond),
 out of date. A "Lineage" link in the nav opens them. To try them, run the
 [example](https://github.com/rock-solid/lineage-kit/tree/main/examples/payload).
 
+**Copy Mermaid**, on both pages, copies what the page shows, with its filters, as a Mermaid diagram:
+the lineage as a flowchart, the data model as an `erDiagram` in crow's-foot notation. Paste it into
+a PR, a doc or a ticket, and GitHub, GitLab and most docs tools draw it.
+
 Works with Payload 3 on Next.js 15 or 16, with React 19.
 
 > **Status:** early. Both pages come from the config only. Which pages use which blocks (from the
@@ -29,9 +33,6 @@ Works with Payload 3 on Next.js 15 or 16, with React 19.
 
 ## 📥 Install
 
-Not published yet: the first release, 0.2.0, is on the
-[roadmap](https://github.com/rock-solid/lineage-kit/blob/main/ROADMAP.md#-payload-plugin). Then:
-
 ```sh
 pnpm add @rocksoliddigital/payload-lineage
 ```
@@ -85,14 +86,20 @@ lineagePlugin({
 });
 ```
 
-Or build either yourself, e.g. in a script:
+Or build either yourself, e.g. in a script, and keep a diagram in your docs up to date:
 
 ```ts
-import { buildContentGraph, buildSchema } from '@rocksoliddigital/payload-lineage';
+import {
+  buildContentGraph,
+  buildSchema,
+  contentGraphToMermaid,
+  schemaToMermaid,
+} from '@rocksoliddigital/payload-lineage';
 import config from '@payload-config';
 
 const graph = buildContentGraph(await config);
 const schema = buildSchema(await config);
+const diagram = schemaToMermaid(schema); // or contentGraphToMermaid(graph)
 ```
 
 ## 🔒 Access

package/dist/client.js

@@ -16,7 +16,7 @@ import {
 } from "@xyflow/react";
 
 // ../lineage-core/src/react.ts
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 
 // ../lineage-core/src/layout.ts
 import ELK from "elkjs/lib/elk.bundled.js";
@@ -72,10 +72,222 @@ function useLayout(nodes, edges, options, onLayout) {
   }, [key]);
   return positions;
 }
+async function copyText(text) {
+  try {
+    await navigator.clipboard.writeText(text);
+    return true;
+  } catch {
+    const area = document.createElement("textarea");
+    area.value = text;
+    area.setAttribute("readonly", "");
+    area.style.position = "fixed";
+    area.style.opacity = "0";
+    document.body.appendChild(area);
+    area.select();
+    try {
+      return document.execCommand("copy");
+    } catch {
+      return false;
+    } finally {
+      area.remove();
+    }
+  }
+}
+function useCopy(resetAfterMs = 2e3) {
+  const [status, setStatus] = useState("idle");
+  const copy = useCallback(async (text) => {
+    setStatus(await copyText(text) ? "copied" : "failed");
+  }, []);
+  useEffect(() => {
+    if (status === "idle") return;
+    const timer = setTimeout(() => setStatus("idle"), resetAfterMs);
+    return () => clearTimeout(timer);
+  }, [status, resetAfterMs]);
+  return { status, copy };
+}
 
 // src/view/ErdCanvas.tsx
 import { useEffect as useEffect2, useMemo, useRef, useState as useState2 } from "react";
 
+// ../lineage-core/src/traverse.ts
+function adjacency(links) {
+  const up = /* @__PURE__ */ new Map();
+  const down = /* @__PURE__ */ new Map();
+  const add = (map, key, value) => {
+    const list = map.get(key);
+    if (list) list.push(value);
+    else map.set(key, [value]);
+  };
+  for (const { source, target } of links) {
+    add(up, target, source);
+    add(down, source, target);
+  }
+  return { up, down };
+}
+function walk(start, next, maxDepth = Infinity) {
+  const seen = /* @__PURE__ */ new Set();
+  let frontier = [start];
+  for (let level = 0; level < maxDepth && frontier.length; level++) {
+    const reached = [];
+    for (const id of frontier) {
+      for (const to of next.get(id) ?? []) {
+        if (to === start || seen.has(to)) continue;
+        seen.add(to);
+        reached.push(to);
+      }
+    }
+    frontier = reached;
+  }
+  return seen;
+}
+function trace(id, links) {
+  const { up, down } = adjacency(links);
+  return /* @__PURE__ */ new Set([id, ...walk(id, up), ...walk(id, down)]);
+}
+
+// ../lineage-core/src/mermaid.ts
+var MERMAID_READABLE_NODES = 50;
+var ARROW = { solid: "-->", dashed: "-.->", thick: "==>" };
+var MERMAID_COLOR = /^(#[0-9a-f]{3,8}|[a-z]+)$/i;
+function toMermaidFlowchart({
+  nodes,
+  edges,
+  groups = [],
+  direction = "LR"
+}) {
+  const ids = new Map(nodes.map((n, i) => [n.id, `n${i}`]));
+  const lines = [`flowchart ${direction}`];
+  for (const n of nodes) lines.push(`  ${ids.get(n.id)}["${escapeLabel(n.label)}"]`);
+  for (const e of edges) {
+    const from = ids.get(e.source);
+    const to = ids.get(e.target);
+    if (!from || !to) continue;
+    const arrow = ARROW[e.style ?? "solid"];
+    const label = e.label ? `|"${escapeLabel(e.label)}"|` : "";
+    lines.push(`  ${from} ${arrow}${label} ${to}`);
+  }
+  const used = new Set(nodes.map((n) => n.group).filter(Boolean));
+  groups.forEach((g, i) => {
+    if (!used.has(g.id) || !MERMAID_COLOR.test(g.color)) return;
+    const members = nodes.filter((n) => n.group === g.id).map((n) => ids.get(n.id));
+    lines.push(`  classDef g${i} fill:${g.color},stroke:${g.color},color:#fff`);
+    lines.push(`  class ${members.join(",")} g${i}`);
+  });
+  return `${lines.join("\n")}
+`;
+}
+function escapeLabel(text) {
+  return text.replace(/#/g, "#35;").replace(/"/g, "#quot;").replace(/</g, "#lt;").replace(/>/g, "#gt;");
+}
+
+// src/mermaid.ts
+var KIND_COLORS = {
+  collection: "#0f7c74",
+  block: "#b4630c",
+  global: "#6b4bb8"
+};
+var EDGE_STYLE = { relationship: "solid", upload: "dashed", blocks: "thick" };
+function contentGraphToMermaid(graph) {
+  return toMermaidFlowchart({
+    nodes: graph.nodes.map((n) => ({ id: n.id, label: n.label, group: n.kind })),
+    edges: graph.edges.map((e) => ({
+      source: e.source,
+      target: e.target,
+      label: e.fields.join(", "),
+      style: EDGE_STYLE[e.kind]
+    })),
+    groups: Object.entries(KIND_COLORS).map(([id, color]) => ({ id, color }))
+  });
+}
+function schemaToMermaid(schema) {
+  const names = entityNames(schema.entities);
+  const byId = new Map(schema.entities.map((e) => [e.id, e]));
+  const lines = ["erDiagram"];
+  for (const entity of schema.entities) {
+    const keys = new Set(schema.relations.filter((r) => r.from === entity.id).map((r) => r.field));
+    lines.push(`  ${names.get(entity.id)}["${escapeLabel(entity.label)}"] {`);
+    for (const field of entity.fields) lines.push(`    ${attribute(field, keys.has(field.name))}`);
+    lines.push("  }");
+  }
+  const lineGroups = /* @__PURE__ */ new Map();
+  for (const r of schema.relations) {
+    if (!names.has(r.from) || !names.has(r.to)) continue;
+    const key = `${r.from}
+${r.field}
+${r.to}`;
+    lineGroups.set(key, [...lineGroups.get(key) ?? [], r]);
+  }
+  for (const group of lineGroups.values()) {
+    const { from, to, field } = group[0];
+    const row = byId.get(from)?.fields.find((f) => f.name === field);
+    const label = [...new Set(group.map((r) => r.path))].join(", ");
+    lines.push(
+      `  ${names.get(from)} ${crowsFoot(group, from, !!row?.required)} ${names.get(to)} : "${escapeLabel(label)}"`
+    );
+  }
+  return `${lines.join("\n")}
+`;
+}
+function entityNames(entities) {
+  const names = /* @__PURE__ */ new Map();
+  const taken = /* @__PURE__ */ new Set();
+  for (const e of entities) {
+    const base = `${e.kind === "global" ? "global_" : ""}${e.slug}`.replace(/[^A-Za-z0-9_-]/g, "_");
+    let name = /^[A-Za-z]/.test(base) ? base : `e_${base}`;
+    for (let i = 2; taken.has(name); i++) name = `${base}_${i}`;
+    taken.add(name);
+    names.set(e.id, name);
+  }
+  return names;
+}
+function attribute(field, isReference) {
+  const type = `${safeWord(field.type)}${field.hasMany ? "[]" : ""}`;
+  const name = safeWord(field.name);
+  const key = field.type === "id" || field.name === "id" ? " PK" : isReference ? " FK" : "";
+  const notes = [
+    ...name !== field.name ? [field.name] : [],
+    ...field.required ? ["required"] : [],
+    ...field.unique ? ["unique"] : [],
+    ...field.relationTo ? [`\u2192 ${field.relationTo.join(" | ")}`] : [],
+    ...field.blocks ? [`blocks: ${field.blocks.join(", ")}`] : []
+  ];
+  const comment = notes.length ? ` "${escapeLabel(notes.join(", "))}"` : "";
+  return `${type} ${name}${key}${comment}`;
+}
+function safeWord(text) {
+  const word = text.replace(/[^A-Za-z0-9_\-[\]()]/g, "_");
+  return /^[A-Za-z]/.test(word) ? word : `f_${word}`;
+}
+function crowsFoot(relations, from, required) {
+  const many = relations.some((r) => r.many);
+  const atMostOne = from.startsWith("global:") || relations.every((r) => r.unique) && !many;
+  const fromSide = atMostOne ? "|o" : "}o";
+  const atLeastOne = required && relations.every((r) => !r.polymorphic && r.field === r.path);
+  const toSide = many ? atLeastOne ? "|{" : "o{" : atLeastOne ? "||" : "o|";
+  return `${fromSide}--${toSide}`;
+}
+
+// src/view/CopyMermaid.tsx
+import { jsxs } from "react/jsx-runtime";
+var CopyMermaid = ({ text, size }) => {
+  const { status, copy } = useCopy();
+  const large = size > MERMAID_READABLE_NODES;
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      className: "rs-lineage__copy",
+      onClick: () => copy(text()),
+      title: large ? `${size} is a lot for one Mermaid diagram; narrow it with the filters first for one that reads well` : "Copy what the page shows as a Mermaid diagram, for a PR, doc or ticket",
+      "aria-live": "polite",
+      children: [
+        status === "copied" ? "Copied" : status === "failed" ? "Couldn't copy" : "Copy Mermaid",
+        large && status === "idle" ? " (large)" : ""
+      ]
+    }
+  );
+};
+
 // src/view/erdModel.ts
 var TABLE_WIDTH = 260;
 var HEADER_HEIGHT = 44;
@@ -188,7 +400,7 @@ function edgesBetween(nodes, edges) {
 }
 
 // src/view/ErdCanvas.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs as jsxs2 } from "react/jsx-runtime";
 var ErdCanvas = (props) => /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ jsx(Canvas, { ...props }) });
 var Canvas = ({ schema, adminURLs }) => {
   const { fitView } = useReactFlow();
@@ -311,8 +523,8 @@ var Canvas = ({ schema, adminURLs }) => {
   const byId = useMemo(() => new Map(schema.entities.map((e) => [e.id, e])), [schema]);
   const focused = selected ? byId.get(selected) : void 0;
   const fieldCount = entities.reduce((n, e) => n + e.fields.length, 0);
-  return /* @__PURE__ */ jsxs("div", { className: "rs-lineage-layout", ref: layoutRef, children: [
-    /* @__PURE__ */ jsx("div", { className: "rs-lineage", "data-ready": positions ? "" : void 0, children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs2("div", { className: "rs-lineage-layout", ref: layoutRef, children: [
+    /* @__PURE__ */ jsx("div", { className: "rs-lineage", "data-ready": positions ? "" : void 0, children: /* @__PURE__ */ jsxs2(
       ReactFlow,
       {
         nodes,
@@ -342,8 +554,8 @@ var Canvas = ({ schema, adminURLs }) => {
               ariaLabel: "Data model overview"
             }
           ),
-          /* @__PURE__ */ jsx(Panel, { position: "top-left", children: /* @__PURE__ */ jsxs("div", { className: "rs-lineage__toolbar", children: [
-            /* @__PURE__ */ jsxs("label", { className: "rs-lineage__toggle", children: [
+          /* @__PURE__ */ jsx(Panel, { position: "top-left", children: /* @__PURE__ */ jsxs2("div", { className: "rs-lineage__toolbar", children: [
+            /* @__PURE__ */ jsxs2("label", { className: "rs-lineage__toggle", children: [
               /* @__PURE__ */ jsx(
                 "input",
                 {
@@ -355,18 +567,30 @@ var Canvas = ({ schema, adminURLs }) => {
               /* @__PURE__ */ jsx("span", { className: "rs-lineage__swatch rs-lineage__swatch--global" }),
               "Globals"
             ] }),
-            /* @__PURE__ */ jsxs("label", { className: "rs-lineage__toggle", children: [
+            /* @__PURE__ */ jsxs2("label", { className: "rs-lineage__toggle", children: [
               /* @__PURE__ */ jsx("input", { type: "checkbox", checked: keysOnly, onChange: () => setKeysOnly((v) => !v) }),
               "Key fields only"
             ] }),
-            /* @__PURE__ */ jsxs("span", { className: "rs-lineage__count", children: [
+            /* @__PURE__ */ jsxs2("span", { className: "rs-lineage__count", children: [
               entities.length,
               " tables, ",
               fieldCount,
               " fields, ",
               lines.length,
               " references"
-            ] })
+            ] }),
+            /* @__PURE__ */ jsx(
+              CopyMermaid,
+              {
+                text: () => schemaToMermaid({
+                  entities: tables.map(
+                    (t) => keysOnly ? { ...t.entity, fields: t.rows } : t.entity
+                  ),
+                  relations
+                }),
+                size: entities.length
+              }
+            )
           ] }) })
         ]
       }
@@ -385,30 +609,30 @@ var Canvas = ({ schema, adminURLs }) => {
 };
 var Details = ({ entity, lines, byId, adminURLs, onSelect }) => {
   if (!entity) {
-    return /* @__PURE__ */ jsxs("aside", { className: "rs-lineage__details", children: [
+    return /* @__PURE__ */ jsxs2("aside", { className: "rs-lineage__details", children: [
       /* @__PURE__ */ jsx("p", { className: "rs-lineage__hint", children: "Hover a table to see what it references and what references it. Click it for the field paths behind each line. Esc clears the selection." }),
-      /* @__PURE__ */ jsxs("dl", { className: "rs-lineage__legend", children: [
-        /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsxs2("dl", { className: "rs-lineage__legend", children: [
+        /* @__PURE__ */ jsxs2("div", { children: [
           /* @__PURE__ */ jsx("dt", { className: "rs-erd__key", children: "many-to-one" }),
           /* @__PURE__ */ jsx("dd", { children: "each document references one; many can share it" })
         ] }),
-        /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsxs2("div", { children: [
           /* @__PURE__ */ jsx("dt", { className: "rs-erd__key", children: "many-to-many" }),
           /* @__PURE__ */ jsx("dd", { children: "a list of references: hasMany, or inside an array or blocks" })
         ] }),
-        /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsxs2("div", { children: [
           /* @__PURE__ */ jsx("dt", { className: "rs-erd__key", children: "one-to-one" }),
           /* @__PURE__ */ jsx("dd", { children: "a unique reference, or a global's single one" })
         ] }),
-        /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsxs2("div", { children: [
           /* @__PURE__ */ jsx("dt", { className: "rs-erd__key", children: "one-to-many" }),
           /* @__PURE__ */ jsx("dd", { children: "a global's list of references" })
         ] }),
-        /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsxs2("div", { children: [
           /* @__PURE__ */ jsx("dt", { className: "rs-erd__key", children: "\u21BB" }),
           /* @__PURE__ */ jsx("dd", { children: "points at its own collection" })
         ] }),
-        /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsxs2("div", { children: [
           /* @__PURE__ */ jsx("dt", { className: "rs-erd__key", children: "*" }),
           /* @__PURE__ */ jsx("dd", { children: "required" })
         ] })
@@ -422,8 +646,8 @@ var Details = ({ entity, lines, byId, adminURLs, onSelect }) => {
     const other = byId.get(otherId);
     const from = byId.get(line.from);
     const to = byId.get(line.to);
-    return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("button", { type: "button", className: "rs-lineage__link", onClick: () => onSelect(other.id), children: [
-      /* @__PURE__ */ jsxs("span", { className: "rs-lineage__link-name", children: [
+    return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs2("button", { type: "button", className: "rs-lineage__link", onClick: () => onSelect(other.id), children: [
+      /* @__PURE__ */ jsxs2("span", { className: "rs-lineage__link-name", children: [
         /* @__PURE__ */ jsx("span", { className: `rs-lineage__swatch rs-lineage__swatch--${other.kind}` }),
         other.label,
         /* @__PURE__ */ jsx("span", { className: "rs-erd__cardinality-tag", children: line.cardinality })
@@ -432,15 +656,15 @@ var Details = ({ entity, lines, byId, adminURLs, onSelect }) => {
       /* @__PURE__ */ jsx("span", { className: "rs-lineage__via", children: line.relations.map((r) => r.path).join(", ") })
     ] }) }, line.id);
   };
-  return /* @__PURE__ */ jsxs("aside", { className: "rs-lineage__details", "aria-live": "polite", children: [
-    /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsxs("span", { className: `rs-lineage__kind rs-lineage__kind--${entity.kind}`, children: [
+  return /* @__PURE__ */ jsxs2("aside", { className: "rs-lineage__details", "aria-live": "polite", children: [
+    /* @__PURE__ */ jsxs2("div", { children: [
+      /* @__PURE__ */ jsxs2("span", { className: `rs-lineage__kind rs-lineage__kind--${entity.kind}`, children: [
         entity.kind,
         entity.auth ? " \xB7 auth" : "",
         entity.upload ? " \xB7 upload" : ""
       ] }),
       /* @__PURE__ */ jsx("h2", { className: "rs-lineage__name", children: entity.label }),
-      /* @__PURE__ */ jsxs("code", { className: "rs-lineage__id", children: [
+      /* @__PURE__ */ jsxs2("code", { className: "rs-lineage__id", children: [
         entity.slug,
         " \xB7 ",
         entity.fields.length,
@@ -448,15 +672,15 @@ var Details = ({ entity, lines, byId, adminURLs, onSelect }) => {
       ] })
     ] }),
     url && /* @__PURE__ */ jsx("a", { className: "rs-lineage__open", href: url, children: "Open in the admin" }),
-    /* @__PURE__ */ jsxs("section", { children: [
-      /* @__PURE__ */ jsxs("h3", { className: "rs-lineage__heading", children: [
+    /* @__PURE__ */ jsxs2("section", { children: [
+      /* @__PURE__ */ jsxs2("h3", { className: "rs-lineage__heading", children: [
         "References \xB7 ",
         out.length
       ] }),
       out.length ? /* @__PURE__ */ jsx("ul", { className: "rs-lineage__list", children: out.map((l) => item(l, l.to)) }) : /* @__PURE__ */ jsx("p", { className: "rs-lineage__hint", children: "None of its fields reference another collection." })
     ] }),
-    /* @__PURE__ */ jsxs("section", { children: [
-      /* @__PURE__ */ jsxs("h3", { className: "rs-lineage__heading", children: [
+    /* @__PURE__ */ jsxs2("section", { children: [
+      /* @__PURE__ */ jsxs2("h3", { className: "rs-lineage__heading", children: [
         "Referenced by \xB7 ",
         into.length
       ] }),
@@ -478,7 +702,7 @@ var TableView = ({
     onSelect,
     onTrace
   }
-}) => /* @__PURE__ */ jsxs("div", { className: `rs-erd__table rs-lineage__node--${entity.kind} rs-erd__table--${state}`, children: [
+}) => /* @__PURE__ */ jsxs2("div", { className: `rs-erd__table rs-lineage__node--${entity.kind} rs-erd__table--${state}`, children: [
   /* @__PURE__ */ jsx(
     Handle,
     {
@@ -489,7 +713,7 @@ var TableView = ({
       isConnectable: false
     }
   ),
-  /* @__PURE__ */ jsxs(
+  /* @__PURE__ */ jsxs2(
     "button",
     {
       type: "button",
@@ -505,18 +729,18 @@ var TableView = ({
       ]
     }
   ),
-  /* @__PURE__ */ jsx("ul", { className: "rs-erd__rows", children: rows.map((f) => /* @__PURE__ */ jsxs(
+  /* @__PURE__ */ jsx("ul", { className: "rs-erd__rows", children: rows.map((f) => /* @__PURE__ */ jsxs2(
     "li",
     {
       className: `rs-erd__row${linked.has(f.name) ? " rs-erd__row--link" : ""}`,
       title: describe(f),
       children: [
-        /* @__PURE__ */ jsxs("span", { className: "rs-erd__field", children: [
+        /* @__PURE__ */ jsxs2("span", { className: "rs-erd__field", children: [
           f.name,
           f.required && /* @__PURE__ */ jsx("span", { className: "rs-erd__required", children: "*" }),
           selfRefs.has(f.name) && /* @__PURE__ */ jsx("span", { className: "rs-erd__self", title: "Points at its own collection", children: "\u21BB" })
         ] }),
-        /* @__PURE__ */ jsxs("span", { className: "rs-erd__type", children: [
+        /* @__PURE__ */ jsxs2("span", { className: "rs-erd__type", children: [
           f.type === "blocks" ? `blocks (${f.blocks?.length ?? 0})` : f.type,
           f.hasMany ? "[]" : ""
         ] }),
@@ -573,46 +797,8 @@ import {
   ReactFlowProvider as ReactFlowProvider2,
   useReactFlow as useReactFlow2
 } from "@xyflow/react";
-
-// ../lineage-core/src/traverse.ts
-function adjacency(links) {
-  const up = /* @__PURE__ */ new Map();
-  const down = /* @__PURE__ */ new Map();
-  const add = (map, key, value) => {
-    const list = map.get(key);
-    if (list) list.push(value);
-    else map.set(key, [value]);
-  };
-  for (const { source, target } of links) {
-    add(up, target, source);
-    add(down, source, target);
-  }
-  return { up, down };
-}
-function walk(start, next, maxDepth = Infinity) {
-  const seen = /* @__PURE__ */ new Set();
-  let frontier = [start];
-  for (let level = 0; level < maxDepth && frontier.length; level++) {
-    const reached = [];
-    for (const id of frontier) {
-      for (const to of next.get(id) ?? []) {
-        if (to === start || seen.has(to)) continue;
-        seen.add(to);
-        reached.push(to);
-      }
-    }
-    frontier = reached;
-  }
-  return seen;
-}
-function trace(id, links) {
-  const { up, down } = adjacency(links);
-  return /* @__PURE__ */ new Set([id, ...walk(id, up), ...walk(id, down)]);
-}
-
-// src/view/LineageCanvas.tsx
 import { useEffect as useEffect3, useMemo as useMemo2, useRef as useRef2, useState as useState3 } from "react";
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx2, jsxs as jsxs3 } from "react/jsx-runtime";
 var KINDS = [
   { kind: "collection", label: "Collections" },
   { kind: "block", label: "Blocks" },
@@ -703,8 +889,8 @@ var Canvas2 = ({ graph, adminURLs }) => {
   const links = visible.edges.length;
   return (
     // `data-ready` once the first layout is done, for tests to wait on
-    /* @__PURE__ */ jsxs2("div", { className: "rs-lineage-layout", ref: layoutRef, children: [
-      /* @__PURE__ */ jsx2("div", { className: "rs-lineage", "data-ready": positions ? "" : void 0, children: /* @__PURE__ */ jsxs2(
+    /* @__PURE__ */ jsxs3("div", { className: "rs-lineage-layout", ref: layoutRef, children: [
+      /* @__PURE__ */ jsx2("div", { className: "rs-lineage", "data-ready": positions ? "" : void 0, children: /* @__PURE__ */ jsxs3(
         ReactFlow2,
         {
           nodes,
@@ -734,8 +920,8 @@ var Canvas2 = ({ graph, adminURLs }) => {
                 ariaLabel: "Content lineage overview"
               }
             ),
-            /* @__PURE__ */ jsx2(Panel2, { position: "top-left", children: /* @__PURE__ */ jsxs2("div", { className: "rs-lineage__toolbar", children: [
-              KINDS.map(({ kind, label }) => /* @__PURE__ */ jsxs2("label", { className: "rs-lineage__toggle", children: [
+            /* @__PURE__ */ jsx2(Panel2, { position: "top-left", children: /* @__PURE__ */ jsxs3("div", { className: "rs-lineage__toolbar", children: [
+              KINDS.map(({ kind, label }) => /* @__PURE__ */ jsxs3("label", { className: "rs-lineage__toggle", children: [
                 /* @__PURE__ */ jsx2(
                   "input",
                   {
@@ -747,7 +933,7 @@ var Canvas2 = ({ graph, adminURLs }) => {
                 /* @__PURE__ */ jsx2("span", { className: `rs-lineage__swatch rs-lineage__swatch--${kind}` }),
                 label
               ] }, kind)),
-              /* @__PURE__ */ jsxs2("label", { className: "rs-lineage__toggle", children: [
+              /* @__PURE__ */ jsxs3("label", { className: "rs-lineage__toggle", children: [
                 /* @__PURE__ */ jsx2(
                   "input",
                   {
@@ -758,13 +944,20 @@ var Canvas2 = ({ graph, adminURLs }) => {
                 ),
                 "Hide unconnected"
               ] }),
-              /* @__PURE__ */ jsxs2("span", { className: "rs-lineage__count", children: [
+              /* @__PURE__ */ jsxs3("span", { className: "rs-lineage__count", children: [
                 visible.nodes.length,
                 " nodes, ",
                 links,
                 " link",
                 links === 1 ? "" : "s"
-              ] })
+              ] }),
+              /* @__PURE__ */ jsx2(
+                CopyMermaid,
+                {
+                  text: () => contentGraphToMermaid({ nodes: visible.nodes, edges: visible.edges }),
+                  size: visible.nodes.length
+                }
+              )
             ] }) })
           ]
         }
@@ -784,18 +977,18 @@ var Canvas2 = ({ graph, adminURLs }) => {
 };
 var Details2 = ({ node, edges, byId, adminURLs, onSelect }) => {
   if (!node) {
-    return /* @__PURE__ */ jsxs2("aside", { className: "rs-lineage__details", children: [
+    return /* @__PURE__ */ jsxs3("aside", { className: "rs-lineage__details", children: [
       /* @__PURE__ */ jsx2("p", { className: "rs-lineage__hint", children: "Hover a node to trace everything it's built from and everything that uses it. Click it to see the fields behind each link. Esc clears the selection." }),
-      /* @__PURE__ */ jsxs2("dl", { className: "rs-lineage__legend", children: [
-        /* @__PURE__ */ jsxs2("div", { children: [
+      /* @__PURE__ */ jsxs3("dl", { className: "rs-lineage__legend", children: [
+        /* @__PURE__ */ jsxs3("div", { children: [
           /* @__PURE__ */ jsx2("dt", { className: "rs-lineage__line rs-lineage__line--relationship" }),
           /* @__PURE__ */ jsx2("dd", { children: "relationship" })
         ] }),
-        /* @__PURE__ */ jsxs2("div", { children: [
+        /* @__PURE__ */ jsxs3("div", { children: [
           /* @__PURE__ */ jsx2("dt", { className: "rs-lineage__line rs-lineage__line--upload" }),
           /* @__PURE__ */ jsx2("dd", { children: "upload" })
         ] }),
-        /* @__PURE__ */ jsxs2("div", { children: [
+        /* @__PURE__ */ jsxs3("div", { children: [
           /* @__PURE__ */ jsx2("dt", { className: "rs-lineage__line rs-lineage__line--blocks" }),
           /* @__PURE__ */ jsx2("dd", { children: "blocks field" })
         ] })
@@ -807,34 +1000,34 @@ var Details2 = ({ node, edges, byId, adminURLs, onSelect }) => {
   const url = adminURLs[node.id];
   const item = (edge, otherId) => {
     const other = byId.get(otherId);
-    return /* @__PURE__ */ jsx2("li", { children: /* @__PURE__ */ jsxs2("button", { type: "button", className: "rs-lineage__link", onClick: () => onSelect(other.id), children: [
-      /* @__PURE__ */ jsxs2("span", { className: "rs-lineage__link-name", children: [
+    return /* @__PURE__ */ jsx2("li", { children: /* @__PURE__ */ jsxs3("button", { type: "button", className: "rs-lineage__link", onClick: () => onSelect(other.id), children: [
+      /* @__PURE__ */ jsxs3("span", { className: "rs-lineage__link-name", children: [
         /* @__PURE__ */ jsx2("span", { className: `rs-lineage__swatch rs-lineage__swatch--${other.kind}` }),
         edge.source === edge.target ? "Itself" : other.label
       ] }),
-      /* @__PURE__ */ jsxs2("span", { className: "rs-lineage__via", children: [
+      /* @__PURE__ */ jsxs3("span", { className: "rs-lineage__via", children: [
         edge.kind,
         " \xB7 ",
         edge.fields.join(", ")
       ] })
     ] }) }, `${edge.source}->${edge.target}:${edge.kind}`);
   };
-  return /* @__PURE__ */ jsxs2("aside", { className: "rs-lineage__details", "aria-live": "polite", children: [
-    /* @__PURE__ */ jsxs2("div", { children: [
+  return /* @__PURE__ */ jsxs3("aside", { className: "rs-lineage__details", "aria-live": "polite", children: [
+    /* @__PURE__ */ jsxs3("div", { children: [
       /* @__PURE__ */ jsx2("span", { className: `rs-lineage__kind rs-lineage__kind--${node.kind}`, children: node.kind }),
       /* @__PURE__ */ jsx2("h2", { className: "rs-lineage__name", children: node.label }),
       /* @__PURE__ */ jsx2("code", { className: "rs-lineage__id", children: node.id })
     ] }),
     url && /* @__PURE__ */ jsx2("a", { className: "rs-lineage__open", href: url, children: "Open in the admin" }),
-    /* @__PURE__ */ jsxs2("section", { children: [
-      /* @__PURE__ */ jsxs2("h3", { className: "rs-lineage__heading", children: [
+    /* @__PURE__ */ jsxs3("section", { children: [
+      /* @__PURE__ */ jsxs3("h3", { className: "rs-lineage__heading", children: [
         "Built from \xB7 ",
         builtFrom.length
       ] }),
       builtFrom.length ? /* @__PURE__ */ jsx2("ul", { className: "rs-lineage__list", children: builtFrom.map((e) => item(e, e.source)) }) : /* @__PURE__ */ jsx2("p", { className: "rs-lineage__hint", children: "None of its fields point at another collection or block." })
     ] }),
-    /* @__PURE__ */ jsxs2("section", { children: [
-      /* @__PURE__ */ jsxs2("h3", { className: "rs-lineage__heading", children: [
+    /* @__PURE__ */ jsxs3("section", { children: [
+      /* @__PURE__ */ jsxs3("h3", { className: "rs-lineage__heading", children: [
         "Used by \xB7 ",
         usedBy.length
       ] }),
@@ -844,7 +1037,7 @@ var Details2 = ({ node, edges, byId, adminURLs, onSelect }) => {
 };
 var ContentNodeView = ({
   data: { node, state, selfLink, onSelect, onTrace }
-}) => /* @__PURE__ */ jsxs2(
+}) => /* @__PURE__ */ jsxs3(
   "div",
   {
     className: `rs-lineage__node rs-lineage__node--${node.kind} rs-lineage__node--${state}`,
@@ -859,7 +1052,7 @@ var ContentNodeView = ({
           isConnectable: false
         }
       ),
-      /* @__PURE__ */ jsxs2(
+      /* @__PURE__ */ jsxs3(
         "button",
         {
           type: "button",
@@ -869,11 +1062,11 @@ var ContentNodeView = ({
           onFocus: () => onTrace(node.id),
           onBlur: () => onTrace(null),
           children: [
-            /* @__PURE__ */ jsxs2("span", { className: "rs-lineage__label", children: [
+            /* @__PURE__ */ jsxs3("span", { className: "rs-lineage__label", children: [
               node.label,
               selfLink && /* @__PURE__ */ jsx2("span", { className: "rs-lineage__self", title: "Links to itself", children: "\u21BB" })
             ] }),
-            /* @__PURE__ */ jsxs2("span", { className: "rs-lineage__meta", children: [
+            /* @__PURE__ */ jsxs3("span", { className: "rs-lineage__meta", children: [
               node.kind,
               " \xB7 ",
               node.slug
@@ -899,13 +1092,13 @@ var nodeTypes2 = { content: ContentNodeView };
 import { Link, useConfig } from "@payloadcms/ui";
 import { usePathname } from "next/navigation";
 import { formatAdminURL } from "payload/shared";
-import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx3, jsxs as jsxs4 } from "react/jsx-runtime";
 var LineageNavLinkClient = () => {
   const { config } = useConfig();
   const pathname = usePathname();
   const href = formatAdminURL({ adminRoute: config.routes.admin, path: "/lineage" });
   const active = pathname === href || pathname.startsWith(`${href}/`);
-  const label = /* @__PURE__ */ jsxs3(Fragment, { children: [
+  const label = /* @__PURE__ */ jsxs4(Fragment, { children: [
     active && /* @__PURE__ */ jsx3("div", { className: "nav__link-indicator" }),
     /* @__PURE__ */ jsx3("span", { className: "nav__link-label", children: "Lineage" })
   ] });

package/dist/index.d.ts

@@ -151,6 +151,16 @@ type Schema = {
 /** Builds the data model of a Payload config: each collection and global with its fields, and the relations between them. */
 declare function buildSchema(config: PayloadConfigLike, { exclude }?: ContentGraphOptions): Schema;
 
+/** The lineage graph as a left-to-right flowchart, each link labelled with its fields. */
+declare function contentGraphToMermaid(graph: ContentGraph): string;
+/**
+ * The data model as an erDiagram: a table per collection and global with its fields, and a line
+ * per row and target, in crow's-foot notation (`}o--o|` is many-to-one, `}o--o{` many-to-many).
+ * Fields keep their full path in their comment, and lines are labelled with the full paths of the
+ * references they stand for.
+ */
+declare function schemaToMermaid(schema: Schema): string;
+
 /**
  * Adds content lineage to a Payload config: the Lineage and Data model pages in the admin, at
  * `/admin/lineage` and `/admin/lineage/schema`, and with `outputFile`, the lineage graph as JSON on
@@ -158,4 +168,4 @@ declare function buildSchema(config: PayloadConfigLike, { exclude }?: ContentGra
  */
 declare function lineagePlugin({ enabled, adminView, access, outputFile, ...graphOptions }?: LineagePluginOptions): Plugin;
 
-export { type ContentEdge, type ContentEdgeKind, type ContentGraph, type ContentGraphOptions, type ContentKind, type ContentNode, type LineageAccess, type LineageCustomConfig, type LineagePluginOptions, type PayloadConfigLike, type Schema, type SchemaEntity, type SchemaField, type SchemaRelation, buildContentGraph, buildSchema, lineagePlugin };
+export { type ContentEdge, type ContentEdgeKind, type ContentGraph, type ContentGraphOptions, type ContentKind, type ContentNode, type LineageAccess, type LineageCustomConfig, type LineagePluginOptions, type PayloadConfigLike, type Schema, type SchemaEntity, type SchemaField, type SchemaRelation, buildContentGraph, buildSchema, contentGraphToMermaid, lineagePlugin, schemaToMermaid };

package/dist/index.js

@@ -3,6 +3,130 @@ import {
   buildSchema
 } from "./chunk-GL5UMO2C.js";
 
+// ../lineage-core/src/layout.ts
+import ELK from "elkjs/lib/elk.bundled.js";
+
+// ../lineage-core/src/mermaid.ts
+var ARROW = { solid: "-->", dashed: "-.->", thick: "==>" };
+var MERMAID_COLOR = /^(#[0-9a-f]{3,8}|[a-z]+)$/i;
+function toMermaidFlowchart({
+  nodes,
+  edges,
+  groups = [],
+  direction = "LR"
+}) {
+  const ids = new Map(nodes.map((n, i) => [n.id, `n${i}`]));
+  const lines = [`flowchart ${direction}`];
+  for (const n of nodes) lines.push(`  ${ids.get(n.id)}["${escapeLabel(n.label)}"]`);
+  for (const e of edges) {
+    const from = ids.get(e.source);
+    const to = ids.get(e.target);
+    if (!from || !to) continue;
+    const arrow = ARROW[e.style ?? "solid"];
+    const label = e.label ? `|"${escapeLabel(e.label)}"|` : "";
+    lines.push(`  ${from} ${arrow}${label} ${to}`);
+  }
+  const used = new Set(nodes.map((n) => n.group).filter(Boolean));
+  groups.forEach((g, i) => {
+    if (!used.has(g.id) || !MERMAID_COLOR.test(g.color)) return;
+    const members = nodes.filter((n) => n.group === g.id).map((n) => ids.get(n.id));
+    lines.push(`  classDef g${i} fill:${g.color},stroke:${g.color},color:#fff`);
+    lines.push(`  class ${members.join(",")} g${i}`);
+  });
+  return `${lines.join("\n")}
+`;
+}
+function escapeLabel(text) {
+  return text.replace(/#/g, "#35;").replace(/"/g, "#quot;").replace(/</g, "#lt;").replace(/>/g, "#gt;");
+}
+
+// src/mermaid.ts
+var KIND_COLORS = {
+  collection: "#0f7c74",
+  block: "#b4630c",
+  global: "#6b4bb8"
+};
+var EDGE_STYLE = { relationship: "solid", upload: "dashed", blocks: "thick" };
+function contentGraphToMermaid(graph) {
+  return toMermaidFlowchart({
+    nodes: graph.nodes.map((n) => ({ id: n.id, label: n.label, group: n.kind })),
+    edges: graph.edges.map((e) => ({
+      source: e.source,
+      target: e.target,
+      label: e.fields.join(", "),
+      style: EDGE_STYLE[e.kind]
+    })),
+    groups: Object.entries(KIND_COLORS).map(([id, color]) => ({ id, color }))
+  });
+}
+function schemaToMermaid(schema) {
+  const names = entityNames(schema.entities);
+  const byId = new Map(schema.entities.map((e) => [e.id, e]));
+  const lines = ["erDiagram"];
+  for (const entity of schema.entities) {
+    const keys = new Set(schema.relations.filter((r) => r.from === entity.id).map((r) => r.field));
+    lines.push(`  ${names.get(entity.id)}["${escapeLabel(entity.label)}"] {`);
+    for (const field of entity.fields) lines.push(`    ${attribute(field, keys.has(field.name))}`);
+    lines.push("  }");
+  }
+  const lineGroups = /* @__PURE__ */ new Map();
+  for (const r of schema.relations) {
+    if (!names.has(r.from) || !names.has(r.to)) continue;
+    const key = `${r.from}
+${r.field}
+${r.to}`;
+    lineGroups.set(key, [...lineGroups.get(key) ?? [], r]);
+  }
+  for (const group of lineGroups.values()) {
+    const { from, to, field } = group[0];
+    const row = byId.get(from)?.fields.find((f) => f.name === field);
+    const label = [...new Set(group.map((r) => r.path))].join(", ");
+    lines.push(
+      `  ${names.get(from)} ${crowsFoot(group, from, !!row?.required)} ${names.get(to)} : "${escapeLabel(label)}"`
+    );
+  }
+  return `${lines.join("\n")}
+`;
+}
+function entityNames(entities) {
+  const names = /* @__PURE__ */ new Map();
+  const taken = /* @__PURE__ */ new Set();
+  for (const e of entities) {
+    const base = `${e.kind === "global" ? "global_" : ""}${e.slug}`.replace(/[^A-Za-z0-9_-]/g, "_");
+    let name = /^[A-Za-z]/.test(base) ? base : `e_${base}`;
+    for (let i = 2; taken.has(name); i++) name = `${base}_${i}`;
+    taken.add(name);
+    names.set(e.id, name);
+  }
+  return names;
+}
+function attribute(field, isReference) {
+  const type = `${safeWord(field.type)}${field.hasMany ? "[]" : ""}`;
+  const name = safeWord(field.name);
+  const key = field.type === "id" || field.name === "id" ? " PK" : isReference ? " FK" : "";
+  const notes = [
+    ...name !== field.name ? [field.name] : [],
+    ...field.required ? ["required"] : [],
+    ...field.unique ? ["unique"] : [],
+    ...field.relationTo ? [`\u2192 ${field.relationTo.join(" | ")}`] : [],
+    ...field.blocks ? [`blocks: ${field.blocks.join(", ")}`] : []
+  ];
+  const comment = notes.length ? ` "${escapeLabel(notes.join(", "))}"` : "";
+  return `${type} ${name}${key}${comment}`;
+}
+function safeWord(text) {
+  const word = text.replace(/[^A-Za-z0-9_\-[\]()]/g, "_");
+  return /^[A-Za-z]/.test(word) ? word : `f_${word}`;
+}
+function crowsFoot(relations, from, required) {
+  const many = relations.some((r) => r.many);
+  const atMostOne = from.startsWith("global:") || relations.every((r) => r.unique) && !many;
+  const fromSide = atMostOne ? "|o" : "}o";
+  const atLeastOne = required && relations.every((r) => !r.polymorphic && r.field === r.path);
+  const toSide = many ? atLeastOne ? "|{" : "o{" : atLeastOne ? "||" : "o|";
+  return `${fromSide}--${toSide}`;
+}
+
 // src/plugin.ts
 import { mkdir, writeFile } from "fs/promises";
 import path from "path";
@@ -77,5 +201,7 @@ function withOutputFile(config, outputFile, graphOptions) {
 export {
   buildContentGraph,
   buildSchema,
-  lineagePlugin
+  contentGraphToMermaid,
+  lineagePlugin,
+  schemaToMermaid
 };

package/dist/lineage.css

@@ -203,6 +203,24 @@ html[data-theme='dark'] .rs-lineage {
 .rs-lineage__toggle input {
   margin: 0;
 }
+.rs-lineage__copy {
+  appearance: none;
+  margin: 0;
+  padding: 3px 10px;
+  border: 1px solid var(--theme-elevation-250);
+  border-radius: var(--style-radius-s, 4px);
+  background: var(--theme-elevation-50);
+  color: var(--theme-text);
+  font: inherit;
+  cursor: pointer;
+}
+.rs-lineage__copy:hover {
+  background: var(--theme-elevation-100);
+}
+.rs-lineage__copy:focus-visible {
+  outline: 2px solid var(--theme-elevation-900);
+  outline-offset: 2px;
+}
 .rs-lineage__count {
   color: var(--theme-elevation-600);
   font-variant-numeric: tabular-nums;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rocksoliddigital/payload-lineage",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Lineage and data model (ERD) pages for the Payload admin: the collections, globals and blocks, and the fields that link them.",
   "keywords": [
     "payload",
@@ -52,13 +52,13 @@
     "@types/react": "19.2.14",
     "@types/react-dom": "19.2.3",
     "graphql": "16.14.2",
-    "next": "16.3.3",
+    "next": "16.3.8",
     "payload": "3.90.2",
     "react": "19.2.6",
     "react-dom": "19.2.6",
     "tsup": "8.5.1",
     "typescript": "5.7.3",
-    "vitest": "4.0.18"
+    "vitest": "4.1.11"
   },
   "peerDependencies": {
     "@payloadcms/next": "^3.0.0",