MermaidDiagram

render: () => {
  const steps = signal("flowchart TB\n  A[Draft] --> B[Review]");
  return (
    <Specimens>
      <Specimen label="Flowchart" width="content">
        <MermaidDiagram
          data-diagram="flowchart"
          title="Release flow"
          caption="From draft to publish"
          source={release}
        />
      </Specimen>
      <Grid columns={2} gap="relaxed">
        <Specimen label="Sequence">
          <MermaidDiagram data-diagram="sequence" title="Review handshake" source={review} />
        </Specimen>
        <Specimen label="State">
          <MermaidDiagram data-diagram="state" title="Change lifecycle" source={lifecycle} />
        </Specimen>
      </Grid>
      <Grid columns={2} gap="relaxed">
        <Specimen label="Pie" note="Slices take the shared chart series in order.">
          <MermaidDiagram data-diagram="pie" source={usage} />
        </Specimen>
        <Specimen label="Bars and a line">
          <MermaidDiagram data-diagram="xychart" source={weekly} />
        </Specimen>
      </Grid>
      <Specimen label="Live source" note="A Signal source redraws in place." width="content">
        <MermaidDiagram data-diagram="live" title="Steps so far" source={steps} />
        <ActionRow>
          <Button
            variant="outline"
            data-diagram-add-step
            onClick={() => {
              steps.value = `${steps.value}\n  B --> C[Publish]`;
            }}
          >
            Add the publish step
          </Button>
        </ActionRow>
      </Specimen>
      <Specimen
        label="Over the size limit"
        note="limits.source is 40 characters here."
        width="content"
      >
        <MermaidDiagram data-diagram="limited" limits={{ source: 40 }} source={release} />
      </Specimen>
      <Specimen
        label="Source that cannot be drawn"
        note="The error and the source stay readable."
        width="content"
      >
        <MermaidDiagram data-diagram="invalid" title="Broken" source={"flowchart LR\n  A --> "} />
      </Specimen>
    </Specimens>
  );
}