Оставить заявку

Создание интерактивных схем с всплывающими пояснениями, поддержкой ссылок и печатью

Внимание! У нас сбои с почтовым сервером! Если не пришло письмо о регистрации или смене пароля напишите нам на info@techwriters.ru! 
@twriters
 obmen_soobsheniyami.pngчат для технических писателей в Telegram

 Зарегистрируйтесь
   RSS
Создание интерактивных схем с всплывающими пояснениями, поддержкой ссылок и печатью
 
Коллеги, подскажите, пожалуйста, инструмент, с помощью которого можно составить ОГРОМНУЮ схему "общения" информационных систем (программ).

Всего около 140-150 систем и у каждой минимум по 7-10 связей с другими. Для того чтобы сократить размеры схемы, создаются объекты с минимумом информации (название, код), а при наведении на связь (коннектор, линию) с другим объектом отображать полные сведения: табличка с описанием API передаваемых данных, форматы, по каким запросам, периодичность и т.п.  

Схема должна открываться на веб-странице и поддерживать ссылки. При необходимости должен распечатываться один объект (ИС) с пояснениями: входные и выходные данные (т.е. с двумя табличками).

Visio (vsd) не подходит, т.к. открывается только в своем просмотрщике. Можно сохранять в SVG, но если он умеет делать всплывающие пояснения в SVG, то подскажите как.
SVG-формат полностью подходит, но трудозатратно делать всплывающие пояснения. Это можно делать Javascript-ом персонально для каждого объекта не шаблонно. Т.е. редактировать кем-то другим файл будет невозможно. И не ясно как "это" потом распечатать. Да и с JS не очень...
Inkscape начинает глючить при большом количестве объектов и вылетает. C подсказками беда какая-то. Их делать можно, но тоже трудозатратно.
Adobe Illustratorа пока нет, но не знаю есть ли смысл его искать.

Может какие-то еще варианты есть?
Готов освоить незнакомые технологии, например Flash и другие   ;)
Изменено: ADVANCED - 18.12.2013 14:58:00
Страницы: Пред. 1 2
Ответы
 
Цитата
ADVANCED пишет:
Чем такое делается ?

http://www.concerthotels.com/100-years-of-rock После того как закончится анимация, можно выделять объекты, а его связи будут автоматически выделяться над другими
вот такую схему получилось сделать и если да, то как?
пойдем со мной?
 
Цитата
eoi пишет:
Цитата
ADVANCED пишет:
Чем такое делается ?

http://www.concerthotels.com/100-years-of-rock После того как закончится анимация, можно выделять объекты, а его связи будут автоматически выделяться над другими
вот такую схему получилось сделать и если да, то как?
Вы можете в браузере посмотреть код страницы и увидеть, как это реализовано.
techwriter.ru.com
 
похоже на html с координатами точек
 
Цитата
techwriter пишет:
Цитата
eoi пишет:
Цитата
ADVANCED пишет:
Чем такое делается ?

http://www.concerthotels.com/100-years-of-rock После того как закончится анимация, можно выделять объекты, а его связи будут автоматически выделяться над другими
вот такую схему получилось сделать и если да, то как?
Вы можете в браузере посмотреть код страницы и увидеть, как это реализовано.

Посмотрел, даже выяснил  как это реализовано.


[CODE][/CODE]



Куча тегов типа

Цитата
<sv g version="1.1" id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1276.263px" height="4300.399px" viewBox="0 0 1276.263 4300.399" enable-background="new 0 0 1276.263 4300.399" xml:space="preserve" style="width: 1277px; height: 4301px;">
                <text transform="matrix(1 0 0 1 1107.4819 589.0336)" font-family="'Tinet'" font-size="30">Pre 1900s</text>
<text transform="matrix(1 0 0 1 1185.4829 976.3442)" font-family="'Tinet'" font-size="30">1910</text>
Цитата
<g>
<path d="M1161.365,4203.694c0,0.098,0.355,0.377,1.068,0.836l0.074,0.541l-0.162,0.381l0.162,0.762l-0.074,0.309l0.146,0.146v0.469
c-0.254,0.303-0.609,0.453-1.068,0.453l-0.381-0.307h-1.23l-0.221-0.146h-0.762c-0.254,0-0.609,0.098-1.068,0.293l-0.088-0.074
h-0.074l-3.135,0.455l-0.527-0.074l-30.381,0.074l-0.088-0.074c-2.207,0.312-3.783,0.645-4.73,0.996l-0.234-0.072l-0.221,0.072
c-0.41-0.635-0.615-1.221-0.615-1.758v-0.381c0.02-0.117,0.25-0.244,0.689-0.381c0-0.283,0.277-0.463,0.834-0.541h0.543
l0.072,0.088l0.996-0.234l0.762,0.146l0.455-0.146h0.307l0.074,0.072l1.465-0.219l30.293,0.072l1.846-0.615l0.381,0.146
l0.219-0.072l0.689,0.072l1.758-0.6l0.234,0.146l0.922-0.615L1161.365,4203.694z"></path>
</g>
<text transform="matrix(1 0 0 1 1185.4829 3496.2969)" font-family="'Tinet'" font-size="30">1980</text>
<text transform="matrix(1 0 0 1 1185.4829 3857.2969)" font-family="'Tinet'" font-size="30">1990</text>
<text transform="matrix(1 0 0 1 1185.4829 4215.2969)" font-family="'Tinet'" font-size="30">2000</text>

<g>
<path d="M756.421,256.404h0.239c0.774,0,1.185,0.417,1.235,1.25h-0.131l0.498,0.806c0,0.466-0.289,0.825-0.865,1.075
c-1.389-0.08-2.08-0.201-2.08-0.362c0-0.215-0.247-0.542-0.738-0.981v-0.457C755.107,257.107,755.721,256.664,756.421,256.404z"></path>
</g>
             </svg>
Но это не ответ )) Чем делается такой SVG, который на странице ? Именно анимация прорисовывается )
 
Цитата
ADVANCED пишет:
Но это не ответ )) Чем делается такой SVG, который на странице ? Именно анимация прорисовывается )
SVG-редактором :))))
techwriter.ru.com
 
Цитата
techwriter пишет: SVG-редактором : ))))
что это за птица?
пойдем со мной?
 
http://habrahabr.ru/post/82989/ например, вот
 
за yEd  спасибо!
Страницы: Пред. 1 2
Читают тему

Рейтинг@Mail.ru