Простой язык для описания и генерации диаграмм в HTML5-документе

В научно-технических текстах для иллюстрации абстрактных концепций применяются различные виды диаграмм: блок-схемы, графики, карты и др. Существует большое разнообразие программ для создания таких иллюстраций, в число которых входят как векторные редакторы общего назначения, так и специализированные инструменты для создания диаграмм конкретного типа. Однако, как правило, все они обладают одним существенным недостатком — отрисовка и позиционирование элементов диаграммы выполняется вручную с помощью мыши. В результате, при создании достаточно сложных диаграмм, бо́льшая часть времени тратится на выравнивание элементов по регулярной сетке.

Альтернативным подходом является применение декларативного языка для описания элементов диаграммы, связей между ними, а также способов их размещения на рисунке (относительно друг друга или в соответствии с некоторой сеткой). На основе полученного описания затем генерируется изображение.

Реализацию такого подхода можно встретить в инструменте визуализации графов Grpahviz (см. примеры), а также в пакете для создания векторных изображений TikZ/PGF (см. пример) для системы компьютерной вёрстки

В рамках данного проекта предлагается реализовать вышеописанный подход на базе технологий HTML5. Необходимо разработать инструмент, позволяющий описывать внутри HTML-документа диаграммы, состоящие из заданных элементов этого документа. Должны предоставляться следующие возможности.

• Возможность относительного позиционирования HTML-элементов. Например: "справа от элемента с заданным id".
  • Должны поддерживаться следующие варианты размещения: справа, слева, сверху, снизу, левый верхний угол, левый нижний угол, правый верхний угол, правый нижний угол.
  • При задании относительного местоположения может быть также задано расстояние от объекта.
• Возможность указания наличия связывающих линий между элементами.
  • Связывающие линии должны создаваться автоматически, а не описываться пользователем как отдельные HTML-элементы.
  • При описании линии для нее могут быть указаны следующие атрибуты: толщина, стиль (сплошная, пунктир, штрих-пунктир и т.д.), стрелка начала, стрелка конца.
• Возможность описания примитивных объектов эллипс и прямоугольник с заданными геометрическими параметрами.
  • Может быть задан текст внутри этих объектов.
  • Могут быть заданы атрибуты: цвет фона, цвет обводки, толщина обводки, стиль обводки (сплошная, пунктир, штрих-пунктир и т.д.).
• Описание диаграм должно задаваться внутри HTML-документа и интерпретироваться в момент отображения документа браузером.