Направи дарение на училище!

Натали Попова, Михаела Кръстева от 9 в клас, Ангела Котева, Лъчезар Томов

Не е необходима регистрация, за да се използва diagrams.net, необходим е само един Google account, но не е необходимо да се изтегля платформата, а може да се използва направо в браузъра.  

• Отваряне на Diagrams.net

1. Oтваряме   търсачката и да въведем diagrams.net и директно се озоваваме във сайта на самата пладформа, който иска може да изтегли приложението, а който смята, че е е необходимо да го тегли започва работата си в браузър. Натискайки ,,Start” diagrams.net започва да зарежда излизат опции къде да бъде запазена диаграмата, като има 6 избора : 

• Google Drive
• One Drive 
• Device 
• Dropbox
• GitHub
• Grit Lab

Разбери повече за БГ Наука:

***

Ние избрахме да запазим схемата в Google drive.  Избираме една фигура и я поставяме на работния лист, за да създадем нова и да я свържем с първата, и тя да бъде същата, като първата избрана фигура.

• Инструкции за създаване и свързване  на фигура 

1. Необходими са следните инструкции: (създаване) 

• Ако знаете, че ще ви трябват редица фигури, вместо да плъзгате всяка, както ви е необходима, пуснете ги всички върху полето, като бързо щракнете върху тях в библиотеката с фигури в левия панел.
• Всички фигури ще изглеждат подредени в чиста линия отляво на диаграмата и ще използват стила ви по подразбиране (това обикновено е най-новият стил, който сте приложили към дадена фигура).

1. Начини за свързване на фигури

• Задръжте курсора на мишката върху съществуваща форма върху полето за рисуване и се появяват четири сини стрелки за посока. 
  

• Щракнете върху една от тези стрелки, за да се покаже изскачащ прозорец – първият запис ще клонира фигурата и автоматично ще изтегли конектор между тях. 

• 
• 
• Ако вече е имало фигура в посока на стрелката, върху която сте кликнали, ще бъде изтеглен конектор, който да свърже двете фигури, вместо да добавя друга клонирана форма. 

• Можете също така да задържите Ctrl и да плъзнете конектор от една от стрелките за посока до дължината и позицията, от която се нуждаете, и когато освободите, ще се появи клонинг на фигурата.

1. Свързване через приплъзване : 

• Плъзнете фигура от библиотеката с фигури и задръжте курсора на мишката върху края на съществуващ конектор, докато видите синия кръг, след което пуснете фигурата, за да я свържете.
• Плъзнете фигура от библиотеката с фигури и задръжте курсора на мишката върху нея. Пуснете фигурата върху една от сините стрелки за посока, за да я свържете в тази посока.

Съвет: За да добавите фигури или съединители в определен стил, изберете формата на съединителя, която е оформена така, както искате, и щракнете върху default style като стил по подразбиране в долната част на раздела на панела за форматиране.

 2А. Клавишни комбинации за свързване на фигури: 

• Alt + X за добавяне и свързване на фигури от библиотеката с форми

Това добавя и свързва фигури вертикално и за това е добро за изграждане на прости схеми или диаграми. 

• Изберете форма.

Задръжте Alt+X и кликнете върху фигура в библиотеката с фигури, за да я свържете. (Option+X на macOS).

• Плъзнете свързаните фигури, за да ги преместите, където е необходимо.

Свързване и създаване на копие \ клониране  через клавишни комбинации: 

Не е нужно да използвате мишката за клониране и свързване на фигури, както е описано по-горе. Можете да направите това чисто с помощта на клавишна комбинация.

1. Изберете форма.
2. Задръжте натиснат Alt+Shift и натиснете един от четирите клавиша със стрелки (курсора), за да клонирате и свържете фигурата в тази посока ( Option+Shift на macOS).

Ако има съществуваща фигура в посоката на клавиша със стрелка, която сте натиснали, тя няма да клонира избраната в момента форма.

Променете стила на формата:

1. Изберете формата или съединителя.
2. В раздела Стил на панела за форматиране отдясно се уверете, че секцията Свойства отдолу е разширена.
3. Щракнете върху квадратчето до етикета на стила Snap to Point, така че да е активирано.

• Ръчно редактиране на формата: 

1. Изберете формата или съединителя, след което щракнете върху бутона Edit Style на Style в раздела на панела за форматиране
2. Добавете следния стил в края: snapToPoint=1;след това щракнете върху Apply.

• Представяне на  математическо уравнение в диаграма:

Можете да добавите математически уравнения към вашите диаграми, като активирате математически набор от меню diagrams.net. Когато въведете уравнение в текстова форма или етикет, активирането на математически набор ще използва MathJax, за да изобрази уравнението ви . MathJax прави уравнения добре и работи във всички браузъри. Има два начина за въвеждани на уравненения LaTeX или AsciiMath. Ето  по едно уравнение  от двете програми: 

Вграден LaTeX: обградете уравнението си с \(и \).

Пример:\(\sqrt{3×-1}+(1+x)^2\)

AsciiMath вграден: като обградите уравнението си с един обратен удар `.

Пример:`a^b + b^2 = c^2`

LaTeX в блок: обградете уравнението си с два знака за долар $$.

Пример:$$\sqrt{3×-1}+(1+x)^2$$

Можете също да смесите LaTeX и AsciiMath вградени в едно текстово поле.

Пример:LaTeX \(\sqrt{3×-1}+(1+x)^2\\) and AsciiMath `a^b + b^2 = c^2`

Следва активирането на математическия набор : 

 Избираме : Extras > Mathematical Typesetting  от меню diagrams.net, за да изобразите вашите уравнения в MathJax. Можете да го деактивирате по всяко време и да видите източника на LaTeX или AsciiMath на уравнението чрез същия елемент от менюто.

Точно както можете да добавяте фигури към клетки на таблици, можете също да добавяте математически уравнения към клетки на таблици и кръстосани функционални таблици. 

Отстраняване на неизправности: 

Ако установите, че математиката ви не е преобразувана, вероятно сте поставили някакъв текст, съдържащ HTML тагове, които форматират текста. Изберете текста, след което кликнете върху бутона HTML в лентата с инструменти, за да покажете HTML таговете.

За промяна на шрифта TeX се използва по подразбиране и когато се преобразува в изображение или PDF формат, уравнението се преобразува в SVG. Можете да промените тези настройки, като използвате параметри на URL .

math-output=html използва HTML-CSS за изобразяване на математиката. Използвайте тази настройка, за да позволите математическите символи да бъдат избирани в PDF файл. Имайте предвид, че не всички символи са избираеми.

math-font=STIX-Web променя шрифта на STIX при генериране на SVG версията на уравнението.

math-font=STIX използва шрифта STIX в HTML-CSS версията на уравнението. 

• Оформяне на различни  готови схеми; видове схеми и диаграми: 

Автоматичното оформление на фигурите в разширената библиотека с фигури в diagrams.net организира различните видове схеми и диаграми, докато добавяте и свързвате повече фигури. Автоматизираното оформление гарантира, че всички фигури във вашата диаграма са разположени равномерно, в хоризонтален или вертикален формат, и автоматично ще увеличи или намали размера на формата на фигурата, за да съответства на съдържанието.

Разширена библиотека с фигури:

 Ако не виждате тази библиотека, щракнете върху Още фигури в долната част на левия панел, изберете Общата библиотека на фигури и щракнете върху Apply.

Автоматично оформлениe : 

Можете да добавяте фигури бързо към автоматични форми на оформление, като използвате клавишна комбинация. Като се използва хоризонтална форма на оформление пример:

1. Пуснете фигура за оформление и изберете фигура вътре на платното за рисуване.
2. Задръжте Alt и кликнете върху фигури във всяка от библиотеките с фигури вляво, за да ги добавите и свържете към избраната фигура. Тази селекция се придвижва до най-скоро добавената фигура, така че лесно можете да добавяте и свързвате допълнителни фигури.
3. Добавете допълнителни съединители от една форма към друга, като щракнете и плъзнете съединителя от синята стрелка, която се появява, когато задържите курсора на мишката върху изходната форма, и я пуснете върху целевата форма.

Автоматично оформяне на структурата на дадена схема : 

Можете също така да клонирате и да свързвате фигури във фигурите, като щракнете върху стрелките за посока, които се появяват, когато задържите курсора на мишката.

1. Задръжте курсора на мишката върху неизбрана форма във формата на дърво или структура на организационната диаграма върху платното за рисуване.
2. Щракнете върху една от стрелките за посока, за да клонирате фигура.

• Щракнете върху лявата или дясната стрелка на фигура, ще добавите друга дъщерна форма на това ниво и автоматично ще я свържете с родителската фигура.
• Кликнете върху стрелката надолу, за да добавите дъщерна форма отдолу.

Бележка: Когато щракнете върху стрелка за посока, за да клонирате фигура, тя копира както текста, така и форматирането. Щракнете двукратно върху която и да е фигура и започнете да пишете, за да промените текста на етикета, и го преправете с помощта на раздела Style в панела за форматиране вдясно.

Автоматичо  оформление  на схемите с повече разклонения : 

1. Плъзнете подтема или фигура от разклонение от библиотеката за разширени форми
2. Задръжте курсора на мишката върху формата и я пуснете върху една от стрелките за посока.
3. Ако искате да добавите допълнителни подтеми или клонове на това ниво в схемата, задръжте курсора на мишката върху формата и кликнете върху стрелка за посока, за да я клонирате.

• Експортиране на диаграми

Експортирайте диаграма в URL:

Diagrams.net улеснява споделянето на вашите диаграми. Можете дори да го кодирате в URL, ако диаграмата ви е по-малка от определен размер. Когато някой кликне върху (много дългия) URL адрес, той ще отвори диаграмата в инструмента за преглед на диаграми. Оттам нататък е лесно да отпечатате или редактирате собствено копие на диаграмата – вашата оригинална диаграма няма да бъде променена, освен ако не посочите друго.

Публикувайте диаграма като връзка от Google Drive. Публикуването на диаграма, която сте запазили в Google Drive като връзка, улеснява споделянето им с хора във форуми, чрез приложения за чат или поимейл.

Има две опции за споделяне на диаграми като връзка:

1. File> Експортиране като> URL кодира цялата диаграма в URL. Това работи за по-малки диаграми и не се ограничава до запазените в Google Диск.

2.File> Публикуване> Връзка създава по-кратка връзка към диаграмата във вашия акаунт в Google Drive, ако тук сте съхранили диаграмата, и се връща към по-дълго експортирания URL, както по-горе, ако това не стане.

Споделяйте диаграми, съхранени в Google Диск като връзки: 

1.Щракнете върху Файл> Публикуване> Връзка.

2.Щракнете върху Проверка, за да видите, че сте задали диаграмата да се споделя публично в Google Диск, преди да се опитате да я публикувате като връзка. Ако не е обществено, отворете вашия Google Drive

3.Щракнете върху Готово, за да се върнете към диалоговия прозорец Публикуване на връзка.

4. Вече можете да промените опциите за преглед, за да зададете различен цвят на връзката, да отворите диаграмата си в редактора вместо лайтбокса или да промените това, което се показва, когато зрителят следва връзката към вашата диаграма. Тези опции са подобни на тези, когато експортирате диаграмата като URL адрес.

Съвет: Ако не сте сигурни, че сте задали правилно разрешенията за споделяне, щракнете върху връзката Проверка до бутона Споделяне.

Как да експортирам диаграма като HTML: 

1. Щракнете върху File> Export as > HTML .
2. Има редица опции, които можете да промените, за да зададете как зрителите да виждат вашата диаграма. След като зададете желаните опции, щракнете върху Export as.
3. Ще бъдете подканени да запазите HTML файл, съдържащ вашата диаграма. Изберете къде искате да запазите файла.

• Опции при експортиране на вашата диаграма като HTML
• Ако използвате Google Drive за съхраняване на вашата диаграма, можете да изберете да включите публичния URL адрес на диаграмата, вместо да правите копие на диаграмата в HTML. В противен случай този радио бутон няма да бъде избран.
• Използвайте списъка с връзки, за да изберете какво ще се случи, когато зрителят щракне върху връзка във вашата диаграма. Можете също да промените цвета на тези връзки – щракнете върху бутона Border Color и изберете нов цвят на връзката от палитрата.
• Задайте Zoom and Fit, за да промените начина, по който вашата диаграма се показва в визуализатора.
• Всички страници са избрани по подразбиране. Ако не искате да включите всички страници във вашата многостранична диаграма, премахнете отметката от това квадратче.
• Зрителите ще могат да включват и изключват слоевете по подразбиране. За да спрете това, махнете отметката от слоевете .
• Ако искате диаграмата ви да се отваря директно в редактора, премахнете отметката от квадратчето Lightbox .

• Създаване на диаграми чрез синтаксиса на Mermaid 

• Mermaid е синтаксис, подобен на Markdown, където можете да използвате текст за описание и автоматично генериране на диаграми. С вдъхновения от Markdown синтаксис на Mermaid можете да генерирате диаграми на потока, UML диаграми, кръгови диаграми, диаграми на Гант и др.

1. Поставете диаграмата Mermaid

Щракнете върху Подреждане> Вмъкване> Разширени> Mermaid

Поставете текста си в текстовото поле, след което щракнете върху Вмъкване. Вашата диаграма ще бъде автоматично създадена и форматирана от вашия текст и ще бъде вмъкната като единична фигура върху платното за рисуване.

1. Редактирайте кода на Mermaid в diagrams.net: 

За да видите кода на Mermaid за някоя от диаграмите, вмъкнати по този начин, изберете фигурата, след което натиснете Enter. Можете да направите промени в кода тук, след което щракнете върху Приложи, за да актуализирате диаграмата на платното за рисуване.

1. Синтаксис на Mermaid:

Диаграмите се създават чрез свързване на текстови етикети с помощта на съединители със стрелки. Можете да избирате различни форми, да добавяте етикети към съединителите и да стилизирате съединители и форми.

Стилове на фигури                 [rectangle]                    (rounded rectangle)

                                                           ((circle))                               {diamond}

Стилове на конектора стрелка: A–>B                                    пунктиран: A-.–>B

                                                           няма стрелка: A–B           с етикет: A–>|label|B

       Видове диаграми     graph                 pie

                    gantt                 sequenceDiagram

                    stateDiagram                classDiagram

                    gitgraph

Ган          задача състояние: done, active, crit, aftersection

Пай                           title

Gitgraph           действия: commit, branch, checkout, merge

UML                         спасителни линии: participant activate

                          контейнери: loop, alt, opt              class

Информация   коментар: %%                             note

Погледнете примерите по-долу, за да видите как синтаксисът на Mermaid се използва за дефиниране на разнообразни диаграми в текста. Отворете тези примерни диаграми на Mermaid в diagrams.net.

Блок-схема

Забележка: 

   A(Coffee machine <br>not working) –> B{Machine has power?}

   B –>|No| H(Plug in and turn on)

   B –>|Yes| C{Out of beans or water?} –>|Yes| G(Refill beans and water)

  C –>|No| D{Filter warning?} –>|Yes| I(Replace or clean filter

  D –>|No| F(Send for repair)

• Видове Диаграми

Диаграма на Гант: 

Диаграмите на Гант са обичани от много ръководители на проекти, тъй като те могат да следят задачите, зависимостите и графика на своите проекти. Макар че може да бъде трудно да се създаде диаграма на Гант в diagrams.net, генерирането на такава е много по-лесно, когато е от текстово описание

gantt

 title Example Gantt diagram

    dateFormat  YYYY-MM-DD

    section Team 1

    Research & requirements :done, a1, 2020-03-08, 2020-04-10

    Review & documentation : after a1, 20d

    section Team 2

    Implementation      :crit, active, 2020-03-25  , 20d

    Testing      :crit, 20d

Диаграма на класа в UML: 

Как би изглеждал простият шаблон на диаграма на класа от diagrams.net в синтаксиса на Mermaid, можете да видите на https://mermaid-js.github.io/mermaid/#/ 

UML Диаграма на последователността: 

UML  диаграмите на последователност се използват, за да покажат предприетите стъпки и участниците, участващи в завършването на даден процес. Тези диаграми се използват широко при разработването на софтуер.

Кръгова диаграма:

Въпреки че можете ръчно да изградите кръгова диаграма diagrams.net, използването на синтаксиса на Mermaid прави много лесно да получите точно правилното разпределение на филийките на пай. В кода на Mermaid можете да използвате процентни стойности или действителната стойност на всяка група. В примера по-долу можете да видите кои дни са най-натоварени за ангажименти към основното хранилище на diagrams.net на GitHub.

Движение на фигурите: 

1. Изберете фигура и ще видите появата на дръжката за завъртане – малка кръгла стрелка над горния десен ъгъл на фигурата.
2. Кликнете върху и плъзнете символа за завъртане наоколо, за да завъртите фигурата си под нов ъгъл. 

• Като алтернатива можете да въведете точен ъгъл, да завъртите фигурата на 90 градуса в раздела Arrange в панела за форматиране вдясно.
• Несиметричните фигури също могат да се обръщат хоризонтално или вертикално чрез раздела Подреждане / Arrange .

Завъртане на фигури: 

1. Изберете няколко фигури, като задържите, Shift след което щракнете върху всяка фигура, която искате да завъртите.
2. Щракнете върху Група в раздела Подреждане в панела за форматиране или щракнете с десния бутон и изберете Групиране от контекстното меню или натиснете Ctrl+G ,за да сформирате група. Полето за избор ще заобиколи избраните ви форми и ще се появи дръжката за завъртане на захващане.
3. Завъртете групата си, както бихте направили една форма – щракнете върху символа за завъртане и плъзнете групата под нов ъгъл.

Завъртете текста на етикета на конектора: 

Изберете етикета на съединител и използвайте дръжката за завъртане, за да завъртите текста.

Съвет: 

 Завъртете конектор: 

1. Обикновено съединителите нямат въртяща се ръкохватка, тъй като пътят, който следват между две фигури, се задава автоматично от точки.
2. Добавете точки, за да промените пътя на съединителя
3. Ако имате отделен съединител, който не е свързан с фигура в двата края, можете да го групирате с друга форма и да го завъртите. 

Поддръжка за ръчно рисувани диаграми с rough.js : 

По-спокоен и неформален стил за форми, запълвания и линии често се използва в инфографиката, учебните материали, картите и отчетите, така че диаграмите да са малко по-малко стерилни и скучни. Грубият стил добавя начертани на ръка опции за засенчване, груби контури и съединители и ръкописни текстови етикети.

Прекарахме няколко часа в интегриране на rough.js, за да актуализираме съществуващия си и доста ограничен комиксов стил и резултатът е доста полезен.

Забележка: 

Нанасяне на първоначалния стил: 

1. Изберете една или повече фигури и съединители, които искате да стилизирате.
2. В панела за форматиране вдясно щракнете върху Скица, за да приложите грубия стил към избраните ви форми, етикети и съединители.

Използвайте стил „комикс“: 

Грубият стил на скица изглежда по-скоро като нарисувана на ръка диаграма. Използвайте стил „комикс“ за по-фин ефект.

1. Изберете формите и съединителите, към които искате да приложите стила на комикса.
2. В раздела Стил на панела за форматиране щракнете върху Свойства .
3. В долната част променете падащото меню Sketch Style на Comic.

Променете свойствата, за да персонализирате стила на скицата: 

Има много други свойства, които можете да промените, за да персонализирате стила на скицата. Имайте предвид, че не всички от тези свойства са приложими за стила, който сте избрали, но може да се прилагат за различен стил. Кликнете върху фигура или съединител, след което разгънете раздела Свойства в раздела Стил на панела за форматиране вдясно. Най-често срещаните свойства са както следва.

Iiggle  – колко грубо или произволно са изчертани границите, съединителите и цветовете на запълване.

Fill Weight – задайте ширината на „писалката“, използвана за изчертаване на цвета на запълване във форма.

Hachure Gap – задайте разстоянието между скицираните линии за запълване.

Hachure Angle – задайте посоката на скицираните линии за запълване.

Disable Multi Stroke – използвайте само един проход на „писалката“ в скицираната граница на фигура или съединител.

Disable Multi Stroke Fill – използвайте само един пропуск на „писалката“ в скицирания цвят на запълване във форма.

Sketch Style – изберете между грубия и комиксовия стил на скица. 

Променете стила на цялата диаграма: 

Можете да зададете нов глобален стил, като използвате една от предварителните настройки, вместо да избирате форми и съединители и да прилагате стилове поотделно.

1. Уверете се, че нищо в диаграмата не е избрано, след което кликнете върху раздела Стил в панела за форматиране вдясно.
2. Изберете настройките за стил, които искате да използвате. Използвайте предварително зададените стилове, за да промените цветовете на фигурите, техните граници и текст, съединители и платно за рисуване. Използвайте отметките за бърза промяна на други настройки за стил:

• Скица прилага грубия стил.
• Заоблени кръгли ъгли на фигурите. 
• Curved променя стила на конектора на curved.

Използвайте rough=1 като параметър на URL:

Като алтернатива, добавете rough=1 като параметър на URL, така че цялата диаграма да има този стил. Например:

https://app.diagrams.net/?lightbox=1&rough=1&highlight=0000ff&edit=_blank&layers=1&nav=1&title=#Uhttps%3A%2F%2Fraw.githubusercontent.com%2Fjgraph%2Fdrawio-diagrams%2Fmaster%2Fblog%2Fgitflow-examples.drawio

Вижте описание на всички поддържани параметри на URL.

Грубият стил може да направи схемите на потока малко по-малко плашещи при обучение и материали за борд.

Добавете няколко страници към вашите диаграми: 

Някои диаграми могат да получат много големи и сложни, например бизнес процеси, UML диаграми, етажни планове или дори големи мозъчни карти и йерархични дървовидни диаграми. Тези диаграми често са по-четливи, когато са разделени на по-малки компонентни диаграми.

С diagrams.net можете да поддържате тези по-малки диаграми на компоненти заедно, като добавите множество страници. Те се показват като раздели на страници в долната част на платното за рисуване. 

Добавете нова страница към диаграма: 

• В лентата с раздели на страницата кликнете върху символа плюс (+), за да добавите нова страница към вашата диаграма.

Друга възможност е да щракнете с десния бутон върху съществуващ раздел или върху трите вертикални точки в лентата с раздели на страницата и изберете Insert Page от контекстното меню.

Дублирайте страница с диаграма:

Ако опростявате завършена сложна диаграма, като разделяте секции от нея на допълнителни страници, е по-лесно да дублирате страницата на диаграмата с всички фигури и след това да изтриете това, от което не се нуждаете.

• Щракнете с десния бутон върху раздела, след което изберете Дублиране.

Като пример: червеният раздел на тази диаграма е дублиран на втора страница, за да направи основната блок-схема малко по-четлива. Връзките на фигурите за влизане и излизане към подходящите страници улесняват зрителите при навигацията през диаграмата.

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

Преименувайте страница на диаграма:

Преименувайте нови и дублирани страници на диаграми, така че да имат смисъл.

1. Щракнете с десния бутон върху раздела, след което изберете Преименуване.
2. Въведете новото си име в изскачащия диалогов прозорец и щракнете върху Преименуване.

Когато преименувате страница на диаграма, ако има връзки от фигури към тази страница, името на свързаната страница автоматично ще се актуализира.

Изтрийте страница с диаграма:

• Щракнете с десния бутон върху раздела, след което изберете Изтриване. 

Забележка: добавянето и изтриването на страници може да бъде отменено и повторено, както всички други промени, които правите във вашите диаграми. Използвайте клавишните комбинации, за Ctrl+Z да отмените и Ctrl+Shift+Z да повторите промените (Cmd+Z и Cmd+Shift+Z на MacOS).

Отпечатайте многостранична диаграма:

Отидете на File> Print и след това отпечатайте това в PDF, като използвате вградената в браузъра функционалност за печат, за да създадете диаграма за отпечатване, която има множество страници в PDF файла. Ако сте под Windows, уверете се, че имате инсталиран подходящ драйвер за принтер.

Източници:

Документация на Diagrams.net: https://www.diagrams.net/doc/

Вземете (Доживотен) абонамент и Подарете един на училище по избор!