从文本编辑器创建流程图

Create flow chart from text editor

我想创建一个简单的网站,但是,解决方案似乎比我希望的要难得多。

我想要的:

我希望能够直接写入浏览器,让它生成一个流程图,用 ENTER 键终止,如下图(用 Visio 生成)。本质上,它是一个文本框,但它会动态地将文本格式化为漂亮的框(注意 蓝色圆圈(时间和作者)在那里说明将有与单词和句子相关联的元数据。)

是否有任何开源库可以做到这一点?

尽管我必须承认 charlietfl 在他的陈述中是正确的,但我认为这是一个有趣的挑战,所以我制作了一个关于如何制作它的快速演示,然后从那里开始你可以进一步发展它。

工作codepen demo

我建议您更改右上角的视图设置。

设计和一切都不够完美,我没有花时间实现箭头,通过查看代码,您应该能够自己弄清楚如何制作它。

HTML:

<div id="flowContainer" class="flowChart">


</div>
<textarea id="textarea" class="textarea"></textarea>
<button onclick="postflow()">Post</button>

CSS:

.flowChart{
  width: 100%;
  height: 600px;
  border: solid 1px gray;
  overflow: auto;
}

.textarea{
  width: 100%;
  height: 200px;
  resize: none;
}

.chart{
  width: 200px;
  min-height: 100px;
  background-color: #ea5e00;
  color: white;
  margin: 10px auto;
  border: solid 1px gray;
}

.chart p{
  margin: 0;
  padding: 10px;
}

Javascript:

function postflow(){

  var flow = document.createElement("div");
  var p = document.createElement("p");
  var textarea = document.getElementById("textarea");
  var text = document.createTextNode(textarea.value);
  textarea.value = "";
  p.appendChild(text);
  flow.className = "chart";
  flow.appendChild(p);
  document.getElementById("flowContainer").appendChild(flow);

}