从文本编辑器创建流程图
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);
}
我想创建一个简单的网站,但是,解决方案似乎比我希望的要难得多。
我想要的:
我希望能够直接写入浏览器,让它生成一个流程图,用 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);
}