Создание блок-схемы из текстового редактора

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

}