# Fishbone Diagram

The **Fishbone Diagram** module visualizes cause-and-effect relationships. Diagrams are stored in the `fishbone_diagrams` table and can be embedded in dashboard modules or detail views.

## Manager

Open the **Fishbone Diagram Manager** from the dashboard. The modal shows a table of diagrams with an **Add Diagram** button. Selecting **Edit** opens the diagram in an editor modal.

A default diagram is seeded in `sql/defaults.sql` so new installations include an example.

## Editor

The editor presents an SVG canvas. Interactions are:

- **Add Category** button below the diagram inserts a new branch.
- **Drag** categories anywhere on the diagram using the small handle. Their coordinates are saved so layouts persist.
- **Drag** causes between categories.
- **Double‑click** a category or cause label to open a dialog for editing the name/text, color and comment.
- **+** icon on each category branch adds a cause.
- **✕** icon next to categories and causes removes them.
- Each category and cause can have its own line color. Pick a hue in the edit
  modal to update both the branch stroke and label text. Leaving the field blank
  falls back to black.

Comments can be edited in the dialog and hovering over any category or cause label displays the saved text in a tooltip.

Diagrams resize automatically to fill the available width. Specify optional
`width` and `height` values when mounting if you need fixed dimensions.

Click **Save** in the modal footer to persist changes via `/api/fishbone_diagrams/{id}/layout`.

## Embedding Diagrams

In Module Builder or Detail View Builder add a `{ "type": "fishbone-diagram", "options": { "diagramId": 1 } }` element. Choose the diagram from the **Diagram** dropdown in the inspector. See [ModuleBuilderTasks.md](ModuleBuilderTasks.md#fishbone-diagram) for details.