Ve vstupních obrazovkách nebo navigačních uživatelských stránkách lze jednoduše zobrazovat i diagramy. K jejich tvorbě je použit nástroj Mermaid (https://mermaid.js.org). Kromě diagramů tak lze stejným způsobem vytvářet i sequence diagramy, Ganttovy diagramy, ERM diagramy a další.
Diagramy použité jako jednoduchý rozcestník pro uživatele mohou zobrazovat toky dokladů s možností prokliku na formuláře. Jedná se o intuitivnější a jednodušší způsob, než je hledání daného formuláře ve stromu činností. Vstupní obrazovky mohou vypadat např. takto:
Celý diagram je samozřejmě dynamický nejen obsahově, ale i graficky. Protože je diagram realizován jako běžný soubor ve webu, platí pro něj stejná pravidla, jako pro běžné HTML předlohy včetně přetěžování aplikačním webem nebo překladů. Po grafické stránce se jedná o kompletně stylovatelné prvky, jejichž design si lze přizpůsobit v uživatelském CSS souboru. Všechny bloky v diagramu se také automaticky zvýrazní po najetí kurzorem myši.
V rámci ESO9Start jsou k dispozici ukázkové diagramy v adresáři Users, předlohy tokdokl1.mmd a tokdokl2.mmd.
Jako předloha stránky s diagramem slouží soubory typu MMD, které obsahují popis diagramu v markdown syntaxi (podrobněji viz produktový web Mermaid). MMD soubor se odkazuje běžným způsobem přes parametr TURL (např.esoform.asp?TURL=Users/tokdokl1.mmd). Oproti standardní syntaxi Mermaid diagramů je pro účely ESO9 v záhlaví MMD souboru uveden pouze nadpis uvozený dvěma hashmarky (#).
Příklad definice diagramu z prvního obrázku:
##Ukázkový diagram toku dokladů v ESO9## --- config: theme: 'base' themeVariables: primaryColor: '#399BCA' primaryTextColor: '#FFFFFF' lineColor: '#000000' --- graph LR A[Prodejní objednávka] --> B[Faktura vydaná] B --> C[Skladová výdejka fyzická] click A "esoform.asp?TPage=PRODEJ/POBJ.HTM&StartFilter=2&HDOKSTYLE=&SDOKSTYLE=&WHERE=WHERE IDTYPDOK=52 AND IDHDOK_VZOR=257&IDTYPDOK_STAVHDOK=52&ORDERBY=ORDER BY CIS_DOK&VZORTEXT=Prodejní objednávka tuzemská&RelType=PARAMETERS&CINNOST=2. 2. 1. 2&DataAction=LAST&Title=Prodejní objednávka tuzemská" click B "esoform.asp?TPage=PRODEJ/FAV.HTM&StartFilter=2&HDOKSTYLE=/*Neuhrazené po splatnosti FVU*/ CASE WHEN (not(dbo.fn_NespZavPohlVal(IDHDOK) <= 0)) AND DTSPLATNO < GETDATE() THEN dbo.fnVarchar_Concatenate(CHAR(35), ''FF0000'') ELSE NULL END AS MF_ROWSTYLE,&SDOKSTYLE=&WHERE=WHERE IDTYPDOK=7 AND IDHDOK_VZOR=7&IDTYPDOK_STAVHDOK=7&ORDERBY=ORDER BY CIS_DOK&VZORTEXT=FVU tuzemská&RelType=PARAMETERS&CINNOST=2. 2. 3. 1&DataAction=LAST&Title=FVU tuzemská" click C "esoform.asp?Tpage=sklad/vydejkas.htm&StartFilter=2&HDOKSTYLE=/*Záporné výdejky - STORNO*/ CASE WHEN HDKUHRADEVAL < 0 THEN dbo.fnVarchar_Concatenate(CHAR(35), ''FF0000'') ELSE NULL END AS MF_ROWSTYLE,&SDOKSTYLE=&WHERE=WHERE IDTYPDOK = 9 and idhdok_vzor = 3485&ORDERBY=ORDER BY CIS_DOK&IDTYPDOK_STAVHDOK=9&vzortext=SVU - sklad 30 - prodej do tuzemska&RelType=Parameters&CINNOST=2. 3. 2. 1&dataaction=last&title=SVU - sklad 30 - prodej do tuzemska" classDef largeBlock font-size:24px,padding:30px; class A,B,C largeBlock;
Jednotlivé bloky jsou označeny písmeny A-Z, prokliky na formuláře s daným typem dokladu jsou pak uvozeny klíčovým slovem click A-Z.