Javascript 从文本编辑器创建流程图

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

我想要什么：

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

---

有没有开源库可以做到这一点？

尽管我必须承认charlietfl在他的声明中是正确的，但我认为这是一个有趣的挑战，所以我做了一个快速演示，说明如何实现它，并从那里进一步开发它

工作

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

设计和一切都不完美，我没有花时间实现一个箭头，通过查看代码，您应该能够自己找出如何实现它

HTML:

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);

}

---

这不是一个代码编写服务。除非您有与此问题相关的真实代码，否则问题就太严重了broad@charlietfl我会满足于一些高层次的回答。这并不是说我贴了一个我的家庭作业的链接，让你帮我完成作业，而是我花时间详细说明了我需要什么，以及到目前为止我做了什么。此外，我没有问一个主观的问题，比如“用户提出的结束问题的最奇怪的原因是什么？”没有……你发布了一个规范，要求某人根据该规范编写代码，而不是帮助你解决特定的代码问题。有5K代表的人应该很清楚这个网站不是这样的works@charlietfl我根据你的抱怨编辑了它。然而，现在我知道我将得到的答案根本不是我所希望的。就是这样！

.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;
}

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);

}