从文本编辑器创建流程图

Question

我希望创建一个简单的网站，然而，解决方案似乎比我希望的要难得多。

我想要的是什么：

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

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

Answer 1

即使我必须承认 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);

}