graphic representation - PHRASING

[foxprogs]

Есть различные виды построения диаграмм для текста, которые помогают лучше понять мысль автора. В Америке блочные диаграммы проходят в школе, у нас же такого не знают. Есть отличный сайт у которого есть несколько видов таких диаграмм, но он теперь стал платным.
По этому идея в том чтобы сделать какую-то простую и удобную версию для сайта ОБТ.
https://equip.biblearc.com/course/phrasing/83694 вот тут можно посмотреть на один из инструментов.
https://vimeo.com/119807704 тут можно посмотреть все фишки этого именно инструмента.
1562080068885-Phrasing - The 5 Passes.pdf
а вот pdf где в кратце можно понять как именно подразумевается работа с инструментом

• понять минимально рабочую версию
• понять, как именно должно все работать (варианты: SVG редактор, HTML+CSS, canvas)

[foxprogs]

попробовал сделать через html+css https://codepen.io/foxprogs/pen/WNYEyVV
из минусов пока что непонятно как работать со стрелками и всей графикой

Вообще исходя из того что я посмотрел в видео, скорее это сделано на canvas потому что выглядит как какой-то графический редактор с инструментами.

Тут есть такая нивидимая сетка. Вообще когда в обычном ворде делаешь такую работу то все отступы делаешь через tab
И тут ты тоже словно по сетке перемещаешь слова или даешь им отступ.

Если делать к примеру микс, на заднем фоне по сетке будут рисоваться все стрелки а сверху текст через html+css, то кажется будет сложно синхронизировать их