Diagramy

Přehled

Modul Diagramy slouží k vytváření, správě a vizualizaci různých typů diagramů přímo v aplikaci eIntranet.net. Využívá technologii Mermaid.js, která umožňuje vytvářet diagramy pomocí textového zápisu s vizuálním náhledem v reálném čase. Modul nabízí interaktivní editor s možností vizuální editace uzlů a spojení, systém šablon pro rychlé vytváření běžných typů diagramů a podporu tisku.

Klíčové funkce

• Vytváření diagramů z prázdného dokumentu nebo připravených šablon
• Interaktivní vizuální editor s náhledem v reálném čase
• Vizuální editace uzlů: změna tvaru, textu, barev a pozic
• Správa spojení mezi uzly včetně popisků
• Podpora 10 typů diagramů: Flowchart, Sequence Diagram, Class Diagram, State Diagram, ER Diagram, Gantt Chart, Pie Chart, Mindmap, Timeline, Git Graph
• Fullscreen režim editoru pro pohodlnější práci
• Export diagramů do tisku
• Soft delete - možnost obnovení smazaných záznamů

Cílová skupina

Modul je určen pro všechny uživatele, kteří potřebují vytvářet a sdílet diagramy - od vývojových diagramů přes sekvenční diagramy až po Ganttovy grafy. Vhodný pro analytiky, projektové manažery, vývojáře a technické pracovníky.

Přístup a nastavení

Jak se dostat do modulu

Navigační cesta v menu závisí na konfiguraci vaší aplikace. Standardně je modul dostupný v hlavním menu aplikace pod názvem Diagramy.

Nastavení modulu

Cesta k nastavení: Nastavení → Diagramy

V nastavení jsou dostupné následující záložky:

• Uživatelská práva - nastavení přístupových práv pro jednotlivé uživatele a skupiny
• Obecná nastavení - zatím bez položek

Uživatelská práva

Oprávnění	Popis
Bez přístupu	Uživatel nemá přístup k modulu Diagramy
Číst mé povolené	Uživatel může zobrazit pouze své vlastní diagramy
Číst mé + vytvářet nové	Uživatel může zobrazit své diagramy, vytvářet nové diagramy a editovat své vlastní diagramy
Číst vše/Vytvářet nové	Uživatel může zobrazit všechny diagramy v systému, vytvářet nové a editovat všechny diagramy
Číst/Upravovat/Mazat vše	Plný přístup ke všem diagramům včetně možnosti mazání a zobrazení smazaných záznamů

Uživatelské rozhraní

Hlavní obrazovka

Po otevření modulu se zobrazí seznam všech diagramů, ke kterým máte přístup. Obrazovka je rozdělena na následující části:

• Záhlaví - název modulu a odkaz na nastavení (pokud máte oprávnění)
• Panel s tlačítky:
  • Přidat - vytvoření nového diagramu (zobrazeno při oprávnění k vytváření)
  • Smazané - zobrazení smazaných záznamů (pouze pro administrátory)
• Tabulka diagramů - přehled všech diagramů

Tabulka diagramů

Tabulka obsahuje následující sloupce:

Sloupec	Popis
ID	Jedinečné číslo záznamu
Název	Název diagramu, kliknutím otevřete detail
Popis	Zkrácený popis diagramu (prvních 100 znaků)
Vytvořil	Jméno uživatele, který diagram vytvořil
Akce	Ikony pro zobrazení, editaci a smazání záznamu

Filtry a vyhledávání

• Textové vyhledávání - vyhledávání v názvech a popisech diagramů pomocí vyhledávacího pole v pravém horním rohu tabulky
• Export - možnost exportu do Excelu, tisku nebo výběru zobrazených sloupců pomocí tlačítek nad tabulkou

Základní operace

Vytvoření nového diagramu

1. Klikněte na tlačítko Přidat v hlavní obrazovce modulu
2. Otevře se dialog Nový diagram s výběrem šablony:
   • Můžete začít s Prázdným diagramem - kliknutím na kartu s ikonou prázdného souboru
   • Nebo vybrat některou z připravených šablon podle kategorie (Flowchart, Sequence Diagram, Class Diagram, atd.)
3. Systém otevře formulář pro vytvoření diagramu s Mermaid editorem
4. Vyplňte povinné pole:
   • Název - název vašeho diagramu
5. Volitelně vyplňte:
   • Popis - podrobnější popis účelu nebo obsahu diagramu
   • Zobrazit popis při vložení - zaškrtávací pole pro zobrazení popisu při vložení diagramu do jiných částí systému
6. Vytvořte diagram v Mermaid editoru (viz kapitola Mermaid Editor níže)
7. Klikněte na tlačítko Uložit

Zobrazení detailu diagramu

1. V tabulce diagramů klikněte na název diagramu nebo na ikonu oka v sloupci Akce
2. Otevře se stránka s detailem, která obsahuje:
   • Základní údaje - název, popis, autor a datum vytvoření
   • Náhled diagramu - vizuální zobrazení diagramu s nástroji pro zoom a tisk
3. V detailu můžete použít následující nástroje:
   • Oddálit/Přiblížit - změna velikosti náhledu (25% až 200%)
   • Obnovit náhled - překreslení diagramu
   • Tisk - otevření tiskového dialogu
   • Celá obrazovka - zobrazení náhledu na celou obrazovku (ukončení klávesou ESC)

Editace diagramu

1. V tabulce diagramů klikněte na ikonu tužky v sloupci Akce
2. Otevře se formulář pro editaci se všemi údaji diagramu
3. Upravte potřebné údaje:
   • Změňte název nebo popis
   • Upravte diagram v Mermaid editoru (viz kapitola Mermaid Editor)
4. Klikněte na tlačítko Uložit pro uložení změn
5. Nebo klikněte na Zrušit pro návrat bez uložení

Poznámka: Editovat můžete pouze diagramy, ke kterým máte oprávnění:

• S oprávněním "Číst mé + vytvářet nové" můžete editovat pouze své vlastní diagramy
• S oprávněním "Číst vše/Vytvářet nové" nebo vyšším můžete editovat všechny diagramy

Smazání diagramu

1. V tabulce diagramů klikněte na ikonu koše v sloupci Akce
2. Potvrďte smazání v dialogovém okně kliknutím na Ano
3. Diagram bude přesunut do koše (soft delete)

Poznámka: Smazat diagramy mohou pouze uživatelé s oprávněním "Číst/Upravovat/Mazat vše". Smazané diagramy lze obnovit přes tlačítko Smazané v hlavní obrazovce.

Vyhledávání diagramů

1. Klikněte do vyhledávacího pole v pravém horním rohu tabulky
2. Začněte psát hledaný text (název nebo popis diagramu)
3. Tabulka se automaticky filtruje podle zadaného textu
4. Pro zobrazení všech záznamů smažte text z vyhledávacího pole

Mermaid Editor

Mermaid Editor je hlavní nástroj pro vytváření a úpravu diagramů. Kombinuje textový editor s vizuálním náhledem a interaktivními nástroji pro úpravu diagramu.

Rozhraní editoru

Editor je rozdělen na dva hlavní panely:

• Panel s kódem (vlevo) - textový editor s Mermaid zdrojovým kódem
  • Tmavé pozadí pro lepší čitelnost
  • Monospace font vhodný pro psaní kódu
  • Tlačítko Šablona pro načtení šablony do existujícího diagramu
  • Tlačítko Docs pro otevření dokumentace Mermaid (externí odkaz)
• Panel s náhledem (vpravo) - vizuální zobrazení diagramu
  • Toolbar s nástroji pro práci s diagramem
  • Interaktivní náhled - uzly a spojení lze přímo editovat kliknutím
  • Mřížka na pozadí pro lepší orientaci

Textový režim

V textovém režimu píšete Mermaid kód přímo do levého panelu. Náhled se automaticky aktualizuje po každé změně (s krátkým zpožděním 500 ms).

Základní syntaxe pro uzly

Tvar uzlu	Syntaxe	Příklad
Obdélník	[text]	A[Start]
Zaoblený obdélník	(text)	B(Proces)
Rozhodnutí (diamant)	{text}	C{Je OK?}
Stadium (zaoblené konce)	([text])	D([Konec])

Syntaxe pro spojení

Typ spojení	Syntaxe	Příklad
Jednoduché spojení	A --> B	Start --> Proces
Spojení s popiskem	A -->|text| B	Rozhodnutí -->|Ano| Konec

Směr diagramu

První řádek diagramu definuje směr toku:

Kód	Význam
flowchart TD	Shora dolu (Top-Down)
flowchart LR	Zleva doprava (Left-Right)
flowchart BT	Zdola nahoru (Bottom-Top)
flowchart RL	Zprava doleva (Right-Left)

Odkaz na dokumentaci: Pro pokročilé funkce Mermaid klikněte na tlačítko Docs v panelu s kódem.

Vizuální editace uzlů

Uzly v náhledu lze editovat přímo bez nutnosti psát kód:

Výběr uzlu

1. Klikněte na uzel v náhledu
2. Uzel se zvýrazní modrým okrajem
3. Nad uzlem se zobrazí toolbar s nástroji
4. Pod uzlem se zobrazí tlačítko + pro přidání navazujícího uzlu

Toolbar vybraného uzlu

Po výběru uzlu se zobrazí plovoucí toolbar s následujícími nástroji:

Ikona	Funkce	Popis
Obdélník	Změnit na obdélník	Změní tvar uzlu na obdélník
Kruh	Změnit na zaoblený	Změní tvar uzlu na zaoblený obdélník
Diamant	Změnit na rozhodnutí	Změní tvar uzlu na diamant (rozhodnutí)
Font	Upravit text	Otevře dialog pro editaci textu a barev uzlu
Šipka	Přidat spojení	Přidá spojení z aktuálního uzlu na jiný uzel
Koš	Smazat uzel	Smaže vybraný uzel včetně všech jeho spojení

Editace textu a barev uzlu

1. Vyberte uzel kliknutím
2. Dvojklikněte na uzel nebo klikněte na ikonu fontu v toolbaru
3. Otevře se dialog Upravit uzel s následujícími poli:
   • ID uzlu - automaticky přiřazené ID (pouze pro čtení)
   • Text uzlu - text zobrazený v uzlu
   • Pozadí - barva pozadí uzlu (výběr z palety barev)
   • Text - barva textu v uzlu (výběr z palety barev)
   • Náhled - živý náhled vzhledu uzlu
4. Upravte požadované vlastnosti
5. Klikněte na Uložit pro aplikování změn

Přidání nového uzlu pod vybraný uzel

1. Vyberte uzel, pod který chcete přidat nový uzel
2. Klikněte na tlačítko + pod vybraným uzlem
3. Do dialogu zadejte text nového uzlu
4. Nový uzel se vytvoří jako obdélník a automaticky se propojí s vybraným uzlem

Smazání uzlu

1. Vyberte uzel kliknutím
2. Klikněte na ikonu koše v toolbaru
3. Potvrďte smazání v dialogu
4. Uzel a všechna jeho spojení budou odstraněny z diagramu

Práce se spojeními

Spojení mezi uzly můžete vytvářet, editovat a mazat pomocí vizuálních nástrojů.

Přidání spojení mezi uzly

1. Vyberte zdrojový uzel kliknutím
2. Klikněte na ikonu šipky v toolbaru
3. V dialogu Přidat spojení vyberte:
   • Cílový uzel - uzel, kam má spojení vést
   • Popisek - volitelný text na spojení (např. "Ano", "Ne", "Další krok")
4. Klikněte na Přidat
5. Spojení se vytvoří v diagramu

Editace popisku spojení

1. Klikněte na popisek spojení v náhledu (text na šipce)
2. Otevře se dialog Upravit spojení s informacemi:
   • Zobrazení: ze kterého uzlu do kterého uzlu spojení vede
   • Pole pro úpravu popisku
3. Upravte popisek podle potřeby
4. Klikněte na Uložit

Mazání spojení

1. Klikněte na popisek spojení v náhledu
2. V dialogu Upravit spojení klikněte na červené tlačítko s ikonou koše v levém dolním rohu
3. Potvrďte smazání
4. Spojení bude odstraněno z diagramu

Nástroje editoru

V horní části panelu s náhledem je toolbar s následujícími nástroji:

Přidání uzlů podle typu

Ikona	Typ uzlu	Použití
Prázdný čtverec	Obdélník	Standardní proces nebo krok
Prázdný kruh	Zaoblený obdélník	Proces s měkkými hranami
Diamant	Rozhodnutí	Bod rozhodování (ano/ne, podmínka)
Databáze	Stadium	Výsledný stav nebo ukládání dat

Po kliknutí na některou z těchto ikon zadáte text nového uzlu a uzel se přidá do diagramu jako samostatný prvek (bez propojení).

Směr diagramu

Dropdown menu umožňuje změnit orientaci celého diagramu:

• Shora dolu (TD) - klasický tok shora dolů
• Zleva doprava (LR) - horizontální tok zleva doprava
• Zdola nahoru (BT) - tok zdola nahoru
• Zprava doleva (RL) - horizontální tok zprava doleva

Zoom náhledu

Nástroj	Funkce
Lupa minus	Oddálit (zmenšit náhled o 25%)
Procenta	Zobrazení aktuální úrovně zoomu (25% - 200%)
Lupa plus	Přiblížit (zvětšit náhled o 25%)

Další nástroje

Ikona	Funkce	Popis
Šipky v kruhu	Obnovit náhled	Překreslí náhled diagramu (užitečné při problémech se zobrazením)
Tiskárna	Tisk	Otevře diagram v novém okně pro tisk

Fullscreen režim

1. Klikněte na ikonu Celá obrazovka v záhlaví karty Mermaid Editor (ikona čtverců v pravém horním rohu)
2. Editor se rozšíří na celou obrazovku pro pohodlnější práci
3. Pro ukončení stiskněte klávesu ESC nebo klikněte znovu na ikonu (nyní zobrazuje šipky směřující dovnitř)

Šablony diagramů

Modul nabízí systém šablon, které vám umožní rychle začít s vytvářením běžných typů diagramů.

Použití šablon

Při vytváření nového diagramu

1. Klikněte na tlačítko Přidat v hlavní obrazovce
2. V dialogu Nový diagram se zobrazí:
   • Karta Prázdný diagram - pro začátek od nuly
   • Karty s šablonami podle kategorií
3. Filtrujte šablony podle kategorie kliknutím na tagy nahoře (Flowchart, Sequence Diagram, atd.)
4. Klikněte na vybranou šablonu
5. Formulář se otevře s předvyplněným Mermaid kódem ze šablony
6. Upravte název a Mermaid kód podle potřeby

Načtení šablony do existujícího diagramu

1. Otevřete diagram v režimu editace
2. V panelu s kódem klikněte na tlačítko Šablona
3. Vyberte kategorii šablony (volitelné)
4. Klikněte na vybranou šablonu
5. Mermaid kód v editoru se nahradí kódem ze šablony

Upozornění: Načtení šablony přepíše veškerý aktuální obsah v Mermaid editoru.

Dostupné kategorie šablon

Kategorie	Popis	Typické použití
Flowchart	Vývojové diagramy	Procesy, workflow, algoritmy
Sequence Diagram	Sekvenční diagramy	Komunikace mezi objekty, API testy
Class Diagram	Diagramy tříd	Objektový design, databázové modely
State Diagram	Stavové diagramy	Stavy objektů, lifecycle
ER Diagram	ER diagramy	Databázové schéma, entity-relationship
Gantt Chart	Ganttovy diagramy	Plánování projektů, časové osy
Pie Chart	Koláčové grafy	Rozložení podílů, statistiky
Mindmap	Myšlenkové mapy	Brainstorming, hierarchie nápadů
Timeline	Časové osy	Historie událostí, milníky
Git Graph	Git grafy	Větvení v Git, merge workflow

Správa šablon (administrátor)

Správu šablon mohou provádět pouze uživatelé s přístupem k nastavení modulu (administrátoři nebo pověření uživatelé).

Přístup ke správě šablon

1. Přejděte na Nastavení → Diagramy
2. V nastavení naleznete záložku se šablonami (pokud je dostupná)

Poznámka: Systém šablon je navržen pro celosystémové použití. Šablony vytvořené administrátorem jsou dostupné všem uživatelům s přístupem k modulu Diagramy.

Export a tisk

Tisk diagramu

Diagram můžete vytisknout přímo z editoru nebo z detailu záznamu.

Z editoru (při vytváření/editaci)

1. V pravém panelu (náhled) klikněte na ikonu tiskárny v toolbaru
2. Otevře se nové okno prohlížeče s diagramem připraveným k tisku
3. V novém okně se automaticky otevře tiskový dialog
4. Vyberte tiskárnu a nastavení tisku
5. Klikněte na Tisk

Z detailu diagramu

1. Otevřete detail diagramu
2. V náhledu klikněte na ikonu tiskárny
3. Postupujte stejně jako při tisku z editoru

Co bude na výstupu

• Vizuální zobrazení diagramu ve formátu SVG
• Vysoká kvalita pro tisk
• Automatické přizpůsobení velikosti stránce
• Bez názvu a popisu (pouze samotný diagram)

Export tabulky diagramů

V hlavní obrazovce modulu můžete exportovat seznam diagramů:

• Excel - export do formátu XLSX
• Print - tisk seznamu diagramů (ne samotných diagramů)
• Colvis - výběr zobrazených sloupců v tabulce

Tipy a doporučení

Jak efektivně pracovat s editorem

• Začněte se šablonou - ušetříte čas použitím připravené šablony místo psaní kódu od nuly
• Kombinujte textový a vizuální režim - pro rychlé změny použijte vizuální nástroje, pro komplexní úpravy upravte kód přímo
• Používejte fullscreen - při práci na složitějších diagramech vám fullscreen režim poskytne více prostoru
• Průběžně ukládejte - změny v editoru se neuloží automaticky, pravidelně klikněte na tlačítko Uložit
• Pojmenujte uzly smysluplně - i když změníte text uzlu, jeho ID zůstává stejné. Pro lepší orientaci v kódu používejte popisná ID

Doporučení pro různé typy diagramů

Flowchart (vývojové diagramy)

• Používejte diamanty pro rozhodovací body
• Opatřete všechny výstupy z rozhodnutí popisky (Ano/Ne)
• Stadium tvary pro začátek a konec procesu

Sequence Diagram (sekvenční diagramy)

• Vhodné pro zobrazení komunikace mezi systémy nebo komponentami
• Používejte šablonu ze kategorie Sequence Diagram

Gantt Chart (Ganttovy diagramy)

• Ideální pro plánování projektů a zobrazení časových závislostí
• Načtěte šablonu z kategorie Gantt Chart a upravte data a úkoly

Klávesové zkratky

Klávesa	Funkce
ESC	Ukončení fullscreen režimu editoru

Řešení problémů

Náhled se nezobrazuje

• Zkontrolujte syntaxi Mermaid kódu - chyby se zobrazí v červeném poli pod náhledem
• Klikněte na tlačítko Obnovit náhled
• Ujistěte se, že máte připojení k internetu (Mermaid.js se načítá z CDN)

Nemohu editovat uzel kliknutím

• Zkontrolujte, že jste v režimu editace (ne v detailu záznamu)
• Zkuste kliknout přesně na uzel, ne na spojení
• Pokud uzel nemá žádný tvar v náhledu, může být problém se syntaxí

Změny se neukládají

• Zkontrolujte, že jste klikli na tlačítko Uložit na konci formuláře
• Ověřte, že máte oprávnění k editaci daného diagramu
• Zkontrolujte, že je vyplněno povinné pole Název

Chci použít jiné typy diagramů než Flowchart

• Vyberte vhodnou šablonu z kategorie (Sequence, Gantt, atd.)
• Nebo upravte první řádek kódu - místo flowchart TD použijte například sequenceDiagram, gantt, pie, atd.
• Prostudujte dokumentaci Mermaid kliknutím na tlačítko Docs