62 lines
1.2 KiB
TypeScript
62 lines
1.2 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { Mermaid } from "./Mermaid";
|
|
|
|
interface StateTransition {
|
|
from: string;
|
|
to: string;
|
|
label?: string;
|
|
}
|
|
|
|
interface DiagramStateProps {
|
|
states: string[];
|
|
transitions: StateTransition[];
|
|
initialState?: string;
|
|
finalStates?: string[];
|
|
title?: string;
|
|
caption?: string;
|
|
id?: string;
|
|
showShare?: boolean;
|
|
fontSize?: string;
|
|
}
|
|
|
|
export const DiagramState: React.FC<DiagramStateProps> = ({
|
|
states,
|
|
transitions,
|
|
initialState,
|
|
finalStates = [],
|
|
title,
|
|
caption,
|
|
id,
|
|
showShare = true,
|
|
fontSize = "16px",
|
|
}) => {
|
|
const stateGraph = `stateDiagram-v2
|
|
${initialState ? ` [*] --> ${initialState}` : ""}
|
|
${(transitions || [])
|
|
.map((t) => {
|
|
const label = t.label ? ` : ${t.label}` : "";
|
|
return ` ${t.from} --> ${t.to}${label}`;
|
|
})
|
|
.join("\n")}
|
|
${(finalStates || []).map((s) => ` ${s} --> [*]`).join("\n")}`;
|
|
|
|
return (
|
|
<div className="my-12">
|
|
<Mermaid
|
|
graph={stateGraph}
|
|
id={id}
|
|
title={title}
|
|
showShare={showShare}
|
|
fontSize={fontSize}
|
|
/>
|
|
{caption && (
|
|
<div className="text-center text-xs text-slate-400 mt-4 italic">
|
|
{caption}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|