Dia Tutorial (Учебник Dia)

Пояснительная записка к переводу

Это перевод статьи «Dia Tutorial» Harry Georga, расположенной по адресу http://www.seanet.com/~hgg9140/comp/diatut/all/all.html.

Т. к. статья-оригинал достаточно старая (2002 г.) я позволила себе поменять картинки и содержание, которое связано с интерфейсом Dia. Поэтому получился не совсем перевод, однако план статьи-оригинала сохранен. Получился перевод под версию Dia 0.97.

По контексту данный перевод не является точно соответствующим оригиналу, т.к. целью было построение более простого для восприятия содержания на русском языке.

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

В некоторых местах я добавляла собственные комментарии. Они помечены так: ПП: курсив.

1. Права, 2. Резюме, 3. Введение, 4. Установка Dia

1. Copying (Права)

Copyright (c) 2002 Harry George.

Разрешается копировать, распространять и/или изменять этот документ в соответствии с условиями GNU Free Documentation License, Version 1.1 или более поздней версии, опубликованной Free Software Foundation; без каких-либо неизменяемых разделов, текстов на передней и задней обложках. Копия лицензии находится в разделе, озаглавленном GNU Free Documentation License.

2. Abstract (Резюме)

Данное руководство описывает Dia, основанную на GTK GNU-программу для создания диаграмм. Мы установим и настроим ее, научимся использовать основные шаблоны и затем изучим дополнительные возможности.

3. Introduction (Предисловие, Введение)

С домашней страницы Dia (http://projects.gnome.org/dia/):

Добро пожаловать на страничку Dia. Dia является основанной на gtk+ программой для создания диаграмм и выпускается под лицензией GPL.
Назначение Dia такое же как у коммерческой Windows-программы Visio. Dia может быть использован для создания различных видов диаграмм. В настоящее время имеются специальные объекты, чтобы помочь рисовать диаграммы объектных отношений, UML диаграммы, блок-схемы, сети и простых схемы. Кроме того, можно добавить поддержку новых форм через написание простых файлов XML, использующих подмножество созданных шаблонов SVG.

Dia может загружать и сохранять диаграммы в обычном формате XML (сжатом по умолчанию для экономии места), может экспортировать диаграммы в EPS или SVG форматы и выводить диаграммы на печать (в том числе те, которые включают несколько страниц).

4. Installation (Установка)

Смотрите текущую версию инсталляционного файла, чтобы определиться с требованиями.

Чтобы собрать Dia, необходимо установить (в следующем порядке):

Каждый из них автоматически конфигурируется при установки из исходников. Для некоторых платформ доступны бинарники. Если установленный Linux новый, то у вас уже могут быть все компоненты.

5. Основы Dia

5.1. Startup (Запуск)

После установки приложение запускается с помощью команды dia. ПП: с помощью такой команды программа запустится в виде пары плавающих окон.

ПП. Dia в виде одного окна (с зафиксированными окнами) выглядит так:

Программа для создания диаграмм Dia

Для начала стоит зайти в меню File ? Параметры и проверить личные настройки. Они сохраняются в вашем домашнем каталоге по адресу .dia/diarc (ПП: мне такой скрытый каталог найти не удалось). Большинство настроек можно оставить по-умолчанию, обратив внимание на следующее:

После щелчка на кнопке OK окна параметров, вы можете приступать к созданию диаграмм.

5.2. New diagram (Новая диаграмма)

ПП. При запуске программы Dia уже открывается один новый документ. Если планируется работать с несколькими, то следует выполнить команду Файл ? Создать. После этого в рабочей области появится вторая вкладка.

Диалоговое окно Настройка страницы (запускается из меню Файл) позволяет установить следующие свойства):

Настройка параметров страницы в Dia

После нажатия кнопки OK, окно параметров страницы исчезает, и вы готовы к созданию диаграммы.

5.3. Draw an Organization Chart (Создание организационной карты, схемы и т.п.)

При создании некой организационной структуры обычно требуется некоторое количество боксов (ПП: боксами будем иногда называть все прямоугольно-квадратное), сплошных и пунктирных линий. Все это может быть сделано базовыми инструментами. Так как же использовать базовые инструменты?

Обратите внимание на план (пп: это описание интерфейса программы, которое мы видим с левой стороны):

Интерфейс Dia

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

Самый простой способ работы заключается в следующем:

  1. Выберите форму
  2. Щелкните по рабочей области.
  3. Создайте надпись в ней. (Это касается не базовых элементов, а большинство фигур из библиотек. Большинство библиотечных фигур может допускать текстовые метки внутри них).
  4. Переместите форму в место ее размещения.
  5. Соедините фигуры линиями. Убедитесь, что линии действительно связаны с метками формы.
  6. Создайте метки для линий в случае необходимости.
  7. Если надо, переместите фигуры и линии. Также можно добавить дополнительные точки соединения, чтобы разместить линии более точно.
  8. Добавляйте и изменяйте другие фигуры и линии.

5.4. Boxes and text (Боксы и текст)

На самом деле можно изначально использовать бокс, который включает текст, а также изменяется, если текст превышает границы бокса. Боксы из библиотеки Блок-схема (например, квадрат) позволяют легко включать в себя текст. К тому же можно создать собственную форму, которая "знает" о тексте.

Однако в данный момент выберем более сложный путь, а именно создадим прямоугольники с текстом, пользуясь исключительно базовыми инструментами.

После создания надписи можно настроить ее свойства через диалоговое окно, доступ к которому можно получить либо через двойной клик по надписи либо щелкнув на ней правой кнопкой мыши и выбрав Свойства.
После размещения прямоугольника выбираем базовый инструмент Текст и щелкаем в центр бокса. Курсор появляется в его центре и мы можем ввести текст. При этом текст не выровнен как надо. Чтобы решить эту проблему следует вызвать окно свойств текста и выбрать выравнивание по середине как по горизонтали так и вертикали.

Если после этих манипуляций вы попробуете переместить бокс, то текст окажется к нему привязанным и переместится вместе с ним. Однако, если попытаться сдвинуть текст с места, то он отсоединиться от бокса.
Чтобы затем точно выровнять текст в боксе можно воспользоваться стрелками на клавиатуре.

Для того, чтобы текст и бокс в дальнейшем все-время «путешествовали» вместе, их можно сгруппировать, например, выделив с помощью рамки выделения и нажав Ctrl + G.

Если в дальнейшем потребуется редактировать какую-либо часть группы, то сначала придется разгруппировать составной объект (Ctrl + Shift + G). ПП: в Windows XP горячие клавиши не работают, поэтому все приходится делать через меню.

Таким образом можно создать что-то наподобие этого:

Пример схемы

ПП. Удобнее копировать боксы с текстом, предварительно выделив группу, чем настраивать текст для каждого прямоугольника. Для редактирования текста следует его выделить и нажать F2.

5.5. Lines (Линии)

Теперь мы можем добавить несколько линий. Мы будем использовать линии «Зигзаг». Рисуем их примерно от одного объекта к другому, а затем с помощью указателя перетаскиваем концы линии точно на метки соединяемых объектов. Когда конец линии фиксируется на метке, то становится красным.

Мы хотим сделать линии более интересными.

Свойства линий устанавливаются с помощью настроек главного окна:

  1. Цвет линии - с помощью иконок цвета переднего плана и фона.
  2. Ширина линии - определяется вертикальными линиями различной ширины.
  3. Стиль линии (например, пунктирная, штриховая) - по середине внизу.
  4. Форма концов линии — внизу слева и справа.

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

Таким образом, для изменения настроек уже существующих линии выполним следующие действия. Для каждой линии следует вызвать ее окно свойств и изменить ширину линии с 0,1 на 0,2. Сделайте линию, соединяющую «менеджера проектов» с «системным архитектором», пунктирной. Но длина штриха может оказаться слишком большой, чтобы линия выглядела адекватно. Поэтому изменим интервал на 0,5. Конечный результат должен быть примерно таким:

Работа с линиями в Dia

Скажем, «системный архитектор» на самом деле докладывает «исполнительному директору» (через длинную цепочку менеджеров среднего звена, конечно). Мы хотим это отметить, но не предавать большого значения. Поэтому нарисуем тонкую линию:

Соединительные линии на схеме

Эх. Мы хотим, чтобы линия находилась снаружи. Но нам не хватает еще одной точки изгиба на линии. Для ее добавления следует выделить линию, щелкнуть в определенном ее месте правой кнопкой мыши и выбрать Добавить сегмент. После добавления одного двух сегментов, можно расположить линию так, чтобы схема выглядела более приятно:

Соединительная линия в Dia

5.6. Saving (Сохранение)

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

Для сохранения можно воспользоваться командой меню Файл ? Сохранить. Вводим имя, например, org.dia и нажимаем кнопку ОК. Если требуется сохранить целый ряд файлов для одной и той же работы, то следует пользоваться командой Сохранить как для каждого отдельного файла. Файл сохраняется в формате XML который является главным образом Scalable Vector Graphics (SVG). Примечание: поскольку мы отказались от сжатия файлов в настройках программы, то можем посмотреть этот файл в текстовом редакторе. Посмотрите.

Для экспорта изображения нужно выбрать команду Файл ? Экспорт... и выбрать расширение или просто ввести его, например, org.png. Обратите внимание на список возможных расширений. Если у вас нет предпочтений, мы предлагаем png (Portable Network Graphics).

Простой экспорт может создать довольно большое изображение. Схема может простирается на несколько печатных страниц. Это не такая уж проблема для HTML, где в браузере можно перемещаться вперед и назад по большому изображению. Однако даже для HTML большое изображение может быть неудобно.

Итак, вот рекомендации:

Уменьшить изображение можно с помощью команды Файл ? Настройка страницы ? Масштабирование ? Заполнять по ? 1 к 1. Этим будет указана необходимость масштабирования в соответствии с тем, чтобы расположить диаграмму на одной странице. Но даже так изображение может быть слишком большим, так что вы можете вернуть переключатель обратно на Масштабирование ? Масштаб и настроить значение до удобного размера, соответствующего вашему контексту HTML.

6. "Продвинутый уровень" работы в Dia

6.1. Layers (Слои)

6.1.1. Simple case (Простой случай)

Предположим, у нас есть четыре UML "класса" объектов, и требуется нарисовать прямоугольник вокруг двух из них. Однако размещенный в последствии прямоугольник перекрывает вид двух «классов».

Перекладывание прямоугольника назад решает эту проблему.

Перемещение объекта на задний план выполняется за счет его выделения и затем:

  1. (длинный путь) выбрать команду Объекты ? Переместить на задний план (или Переместить дальше).
  2. (быстро) Ctrl + Shift + B
взаимное расположение объектов при создании схемы

6.1.2. Full layering (Полное расслоение)

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

Если вы знакомы со слоями Gimp'а, то вы в деле – здесь такой же механизм. В противном случае, будьте внимательны.

Когда вы начинаете создавать новую диаграмму, после установки свойств страницы, следует отобразить окно работы со слоями (Вид ? Показать слои). В окне Dia справа появится такая панель:

Использование слоев в Dia

Нажмите на кнопку создания нового слоя (голубой плюс), и у вас будет "Новый слой". По умолчанию он разместится выше фонового слоя и будет выделен. Выделенный слой можно переместить относительно других слоев с помощью зеленых стрелок вверх и вниз. Конечно, вым следует оставить фоновый слой в нижней части стека.

Щелчки на глазе рядом со слоем включают-отключают его видимость на диаграмме. Как правило, вы создаете каждый слой по отдельности, включив только его видимость, затем включаете видимость на всех слоях время от времени, чтобы проверить выравнивание.

В нашем примере, мы помещаем текстовый объект со словом "DRAFT" на фоновый слой. Мы делаем этот текстовый объект серым с помощью селектора цвета. Затем переходим на новый слой и создаем диаграмму. Если оба слоя будут видимы, то получится примерно следующее:

Размещение объектов на слоях

6.2. Alignment (Выравнивание)

Предположим, что у нас есть несколько небрежно выровненных объектов:

Выравнивание объектов в Dia

Мы могли бы очень осторожно перемещать их и сделать выровненными. Но лучше обратиться к использованию функций выравнивания. Выберите два левых круга и выполните команду Объекты ? Выравнивать ? По левому краю (Shift + Alt + L). Тоже самое нужно сделать для правых кругов. Затем следует выделить пары верхних и нижних и выровнять их по верху или низу.

Выровненые круги

6.3. Selection (Выделение)

Очевидными способами выделения являются:

  1. Щелчок указателем на объекте.
  2. Щелчок указателем с зажатой кнопкой Shift на 1 или более объектов.
  3. Перемещение указателя с зажатой левой кнопкой мыши через объекты, которые требуется выделить. При перемещении видна штрих-линия.

Но возможно вам захочется чего-нибудь фантастического. В таком случае следует обратить внимание на пункт меню Выделение:

Меню Выделение в Dia

Например, применительно к этой схеме, после выделения объекта «А»:

Пример схемы

ПРИМЕЧАНИЕ: Если я когда-нибудь выясню, что делают радиокнопки, я дам вам знать.

6.4. Shape Libraries (Библиотеки элементов)

Dia поставляется с несколькими библиотеками уже готовых форм. Их также можно использовать для создания собственных.

Эти библиотеки, конечно, предметно-ориентированные, так что их использование должно быть описано в других контекстах (например, UML должен обсуждаться в руководстве по разработке программного обеспечения). Здесь мы сосредоточимся на механизме использования элементов библиотек.

Каждая библиотека сохранятся в отдельную директорию везде, где Dia может быть установлен. Например, если Dia расположен в /usr/bin/dia, то нам бы хотелось посмотреть /usr/share/dia.

/usr/share/dia/
  dia_logo.png         Dia's logo
  shapes/
    Flowchart/         objects, in paired files (icon and shape)
      magdisk.xpm      icon
      magdisk.shape    shape description
      ...
  sheets/      object descriptions in various languages (XML)
    ER.sheet
    Flowchart.sheet
    UML.sheet
    ...

Например, если нас интересует библиотека Flowchart (Блок-схема), в частности объект magnetic disk, мы находим файл magdisk.shape:

<?xml version="1.0"?>
 
<shape xmlns="http://www.daa.com.au/~james/dia-shape-ns"
       xmlns:svg="http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd">
  <name>Flowchart - Magnetic Disk</name>
  <description>Magnetic Disk</description>
  <icon>magdisk.xpm</icon>
  <connections>
    <point x="0"   y="2"/>
    <point x="2.5" y="0.4375"/>
    <point x="5"   y="0"/>
    <point x="7.5" y="0.4375"/>
    <point x="10"  y="0"/>
    <point x="0"   y="2.5"/>
    <point x="0"   y="7.5"/>
    <point x="0"   y="5"/>
    <point x="0"   y="10"/>
    <point x="10"  y="2.5"/>
    <point x="10"  y="5"/>
    <point x="10"  y="7.5"/>
    <point x="10"  y="10"/>
    <point x="2.5" y="11.5625"/>
    <point x="5"   y="12"/>
    <point x="7.5" y="11.5625"/>
  </connections>
  <textbox x1="0" y1="4" x2="10" y2="10"/>
  <svg:svg width="10" height="12">
    <svg:path d="M 0,2 c 2,-1.5 3,-2 5,-2 s 3,0.5 5,2 v 8
                 c -2,1.5 -3,2 -5,2 s -3,-0.5 -5,-2 v -8 z
                 M 0,2 c 2,1.5 3,2 5,2 s 3,-0.5 5,-2" style="fill: default"/>
  </svg:svg>
</shape>

Примечание:

<object name="Flowchart - Magnetic Disk">
      <description xml:lang="no">Magnetdisk</description>
      <description xml:lang="fr">Disque Magnйtique</description>
      <description xml:lang="de">Magnetdisk</description>
      <description>Magnetic Disk</description>
    </object>

Таким образом, мы получаем подсказки для каждого конкретного языка.

Вы можете делать ваши собственные библиотеки и формы, следуя за приведенными выше шаблонами.

Некоторые формы библиотек (например, UML) имеют связанную обработку и поэтому имеют не просто .shape-файл. Создание собственной библиотеки-с-обработкой требует разборки кода на языке C, что выходит за рамки этого руководства. (Возможно, встроенный Python будет поддерживаться в будущем, что упростит и это приключение.) ПП: кажется это уже свершилось.