Fishbone Diagram

Builds Ishikawa (cause-and-effect) diagrams on an HTML canvas. The problem statement sits in the head on the right, the spine runs left, and six default categories (People, Process, Technology, Environment, Materials, Management) branch above and below with their causes. Edit inline, undo/redo, save diagrams to local storage, export PNG, and toggle fullscreen.

1. Click Edit Problem (or click the head) to set the effect text 2. In the Categories card, rename categories and add or remove causes per category 3. Use Undo/Redo buttons or Ctrl/Cmd+Z (Shift for redo) to step through history 4. Click Save to name and store the current diagram, or Download to export PNG 5. Use Fullscreen to expand the canvas; saved diagrams load or delete from the list

Categories are split into a top half and a bottom half around the horizontal spine; each category branch lists its causes as diagonal tick lines. Cause text longer than 16 characters is truncated with an ellipsis on the canvas (the full text is preserved in the editor). Selection is highlighted in blue. Diagrams persist via IndexedDB under the fishbone-diagram-saved key and can be reloaded or deleted from the Saved Diagrams list, sorted newest first.