View Source Spooks.SpooksMermaidDiagrams (Spooks Agentic Workflow Engine v0.1.5)
Module for generating mermaid diagrams from a workflow module.
You need to have mermaid.js included in your project to render the diagrams. Add it using your package manager (npm, yarn, poetry, etc).
You also need a live view javascript hook to render the diagrams.
In hooks.js
you can add the following code:
import mermaid from "mermaid";
let Hooks = { }
Hooks.Mermaid = {
mounted() {
this.renderMermaid();
},
updated() {
this.renderMermaid();
},
renderMermaid() {
mermaid.run(undefined, this.el.querySelectorAll('.mermaid'));
}
};
export default Hooks
Then in your heex files you can include the diagram like this:
Example:
<div phx-hook="Mermaid" id="my-diagram-id">
<div markdown={1}>
<pre class="mermaid">
<%= @diagram_text %>
</pre>
</div>
</div>
Summary
Functions
Generates a mermaid diagram from a workflow module.
Generates a mermaid diagram from a list of steps. You can get the steps from a workflow by calling the steps function on the workflow.
Functions
Generates a mermaid diagram from a workflow module.
Example:
iex> Spooks.SpooksMermaidDiagrams.get_spooks_diagram_text(Spooks.Sample.SampleWorkflow)
Generates a mermaid diagram from a list of steps. You can get the steps from a workflow by calling the steps function on the workflow.
Example:
iex> steps = Spooks.Sample.SampleWorkflow.steps()
iex> Spooks.SpooksMermaidDiagrams.get_spooks_diagram_text_from_steps(steps)