View Source Spooks.SpooksMermaidDiagrams (Spooks Agentic Workflow Engine v0.1.2)

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

get_spooks_diagram_text(workflow_module_name)

Generates a mermaid diagram from a workflow module.

Example:

iex> Spooks.SpooksMermaidDiagrams.get_spooks_diagram_text(Spooks.Sample.SampleWorkflow)

get_spooks_diagram_text_from_steps(steps)

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)