从文本编辑器创建流程图[已关闭]

尽管我必须承认 查理特福

工作 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;
}

Java脚本:

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

}