A fishbone editor

Make a bulleted Markdown list in the top left to update the list
Press edit to hide the editor
Press save to use SVG Crowbar to save a copy
Click to drag nodes

This is an integration of this implementation of a Fishbone or Ishikawa diagram, which shows contributions of different levels of a hierarchy to a main concept, with a Markdown editor for making quick diagrams.

The diagram is implemented in d3.js, while rich-text editing is provided by CodeMirror, and marked handles Markdown processing.

If you have insights, or make modifications, share them on the thread on the d3-js discussion group that spurred this work!

forked from bollwyvl's block: A fishbone editor

<!DOCTYPE html>
  <head>
    <title>d3 Fishbone diagram</title>
    <meta charset="utf-8">
    
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.22.0/codemirror.min.css">
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.22.0/theme/neat.css">
    <style>
      @import url("./style.css");
    </style>
  </head>
  <body>
    <div id="editor">
      <a id="edit" href="#">edit</a>
      
      <a href="javascript:javascript: (function () { var e = document.createElement('script'); if (window.location.protocol === 'https:') { e.setAttribute('src', 'https://raw.github.com/NYTimes/svg-crowbar/gh-pages/svg-crowbar.js'); } else { e.setAttribute('src', 'https://nytimes.github.com/svg-crowbar/svg-crowbar.js'); } e.setAttribute('class', 'svg-crowbar'); document.body.appendChild(e); })();">save</a>
      <div id="code">
        <textarea>- Quality
 - Machine
 - Material
 - Milieu
 - Manpower</textarea>
      </div>
    </div>
    <div id="fishbone"></div>

Modified http://cdnjs.cloudflare.com/ajax/libs/marked/0.3.1/marked.min.js to a secure url

Modified http://cdnjs.cloudflare.com/ajax/libs/d3/3.4.1/d3.min.js to a secure url

Modified http://cdnjs.cloudflare.com/ajax/libs/codemirror/3.22.0/codemirror.min.js to a secure url

Modified http://cdnjs.cloudflare.com/ajax/libs/codemirror/3.22.0/addon/edit/continuelist.js to a secure url

Modified http://cdnjs.cloudflare.com/ajax/libs/codemirror/3.22.0/mode/xml/xml.js to a secure url

Modified http://cdnjs.cloudflare.com/ajax/libs/codemirror/3.22.0/mode/markdown/markdown.js to a secure url

https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.1/marked.min.js

https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.1/d3.min.js

https://cdnjs.cloudflare.com/ajax/libs/codemirror/3.22.0/codemirror.min.js

https://cdnjs.cloudflare.com/ajax/libs/codemirror/3.22.0/addon/edit/continuelist.js

https://cdnjs.cloudflare.com/ajax/libs/codemirror/3.22.0/mode/xml/xml.js

https://cdnjs.cloudflare.com/ajax/libs/codemirror/3.22.0/mode/markdown/markdown.js