mintel.me/apps/web/src/payload/blocks/MermaidBlock.ts

import { MintelBlock } from "./types";

import type { Block } from "payload";

export const MermaidBlock: MintelBlock = {
  slug: "mermaid",
  labels: {
    singular: "Mermaid",
    plural: "Mermaids",
  },
  admin: {
    group: "MDX Components",
  },
  ai: {
    name: "Mermaid",
    description:
      'Renders a Mermaid.js diagram (flowchart, sequence, pie, etc.). Diagram code goes as children. Keep it tiny (max 3-4 nodes). Wrap in div with className="my-8".',
    usageExample: `<div className="my-8">
  <Mermaid id="my-diagram" title="System Architecture" showShare={true`,
  },
  fields: [
    {
      name: "id",
      type: "text",
      required: true,
      admin: {
        description:
          "A unique ASCII ID for the diagram (e.g. 'architecture-1').",
      },
    },
    {
      name: "title",
      type: "text",
      required: false,
      admin: {
        description: "Optional title displayed above the diagram.",
        components: {
          afterInput: [
            "@mintel/payload-ai/components/AiFieldButton#AiFieldButton",
          ],
        },
      },
    },
    {
      name: "showShare",
      type: "checkbox",
      defaultValue: false,
      admin: {
        description: "Show the share button for this diagram?",
      },
    },
    {
      name: "chartDefinition",
      type: "code",
      required: true,
      admin: {
        language: "markdown",
        description:
          "The raw Mermaid.js syntax (e.g. graph TD... shadowing, loops, etc.).",
        components: {
          afterInput: [
            "@mintel/payload-ai/components/AiFieldButton#AiFieldButton",
          ],
        },
      },
    },
  ],
};