Kreslení stavových diagramů - alternativa k programu DOT?

[Jerry999]

Ahoj
Dlouhé roky jsem buď vše programoval přímo nebo si to kreslil tužkou a pak to případně překresloval do dokumentace. Kvůli složitosti zadání jsem nedávno vyzkoušel program dot http://www.graphviz.org/doc/info/lang.html a docela se mi zalíbil.
Je super, že stačí do textového souboru vypsat stavy + seznam hran a vypadne rozumný obrázek. Ve chvíli, když se ukáže (bohužel často), že situace je složitější, potřebuju přidat další stav nebo hranu, jen ho připíšu do souboru a za vteřinu mám nový obrázek, tomu nemůže konkurovat ani čmárání na papír a vypadá to mnohem lépe. O pracností úpravy v grafickém programu, kde bych musel kvůli nové bublině ostatní posouvat, ani nemluvě.

U jednoduchých obrázků zvládá často rozrovnat bubliny a promotat hrany, že se nic nekříží a vypadá to rozumně....
JENŽE dost často koukám na výsledek a k dokonalosti tomu chybí drobnost, stačilo by jednu hranu vést jinudy a nemusela se vůbec křížit nebo bych chtěl jednu bublinku kousek posunout, aby byla na první pohled vidět symetrie levé a pravé strany... a najednou zjišťuji, že bych potřeboval mít možnost dát programu nějaký hint, jak to chci uspořádat nebo třeba si vynutit konkrétní umístění konkrétního nódu nebo hrany a ono to NEJDE?

Někdy pomůže změnit pořadí v seznamu nódů, navíc se dá využít zařazení nódů do skupiny se stejným rankem nebo měnit váhu jednotlivých hran, ale to je asi tak všechno. U složitějšího diagramu leckdy stačí dodatečně přidat jedinou hranu a přestože do teď to vypadalo dobře, najednou se vše přesype, obrázek zabírá dvojnásobek místa a z diagramu je zmatené bludiště...

Jasně, můžu vzít výstup v SVG a úpravy provést tam, třeba i přidat tam tu závěrečnou hranu ručně, když si s ní dot neporadí, ale to mi připadá jako škoda, protože vstupní soubor pak můžu zahodit, veškeré úpravy od toho okamžiku musím dělat ručně v tom SVG, což v okamžiku, kdy chci do bubliny napsat delší text a kvůli tomu zvětšit bublinu, jsem zase na začátku...

Zkoušel jsem místo dot použít neato (i ostatní layouty), tam sice jde u nódu použít atribut pos, jenže výsledek je mnohem horší než u dot, hlavně se neato vůbec nesnaží uspořádat hrany tak, aby to vypadalo hezky. Nakonec jsem zjistil, že jde použít dot k vygenerování výstupu obsahující pozice, který pak zvládne neato vyrenderovat, takže to je teoretická možnost úpravy, ale v důsledku jsem si oproti editaci SVG moc nepomohl...

Takže otázka, zda není nějaká finta, jak do vstupu pro dot vsunout nějaký hint pro umístění nebo třeba nějaký fork projektu, který by toho uměl víc? Pokušení stáhnout zdrojáky a zkusit program "vylepšit" zatím odolávám, protože stejné problémy určitě řešili i jiní?

[Reklama]

[listoper]

Nevim presne jestli to je v necem lepsi ale kdysi sem si hral s plantUML.
https://plantuml.com/
Mozna stoji za zkousku

[Ivan Brezina]

Kdysi davno jsem pro diplomku pouzil editor IPE

PS: dot jsem kdysi pouzil jako knihovnu ve svym OS projektu a musim konstatovat ze to ma k dokonalosti daleko. Cely ten dot kdysi davno uvolnilo AT&T jako svuj vyzkumny projekt a od te doby se to temer nevyviji. Zatimco kresleni planarnich grafu se posunulo jako obor hodne dopredu(existuje poptavka z komercni sfery). Pokud se dobre pamatuju tak jsem narazil na nejaky open-source projekt pro planarni grafy napsany v Jave(na nejake francouzske univerzite) a ten byl mnohem dal nez dot, akorat vsechna dokumentace byla francouzsky.

[Ondra Satai Nekola]

PlantUML je prima, zejména v kombinaci s gitem atp.

[Jerry999]

Tak jsem zkoušel PlantUml...
Podle popisu, co to všechno umí, to vypadá skvěle. Trochu odlišná syntaxe by nevadila, odlišný vzhled výsledku taky ne.
Tak jsem v tom zkusil reprodukovat jeden diagram. Trochu zamrzelo, že tu nejde definovat víc stejně pojmenovaných hran na jednom řádku jako umí dot:
{a1, a2, a3}->t [label="timeout"]
Jenže během chvíle jsem zjistil, že se to chování dot podobá ve všech nectnostech. Například tenhle diagram lze nakreslit planárně, stačí prohodit několik stavů.
http://www.plantuml.com/plantuml/png/TP51ReD034NtSmglMqKAp2wBAd2DgWixCrAem8DWg0Htw0boXXoXApXO0MSHoCm6YVV7jfvzRZqslgjATIsC1LlLlWTZsqjJrBvmhDJdsnSS3X_GM3IzMh_hFnxX18vQ72mxo2IP0zhmN2aypbJgJj3zk9Adsrg1IIGW7Giu4YWA3yaL9P40TIpWI20cc2ouBdlkIfX-iHNiDzRYXkaEfbA_cxTIlL-ENYZFj7OpjepmFTu7W_9-6NUvziJZ7xJLT6iKifpbQQRq2MD-DAdimECTZ2DyR95U1Eb5C9EzKhg3gTHlLOJg_M7qGaE251Oa4NoUANt2E2Ze0wUTm-mzLsVBfglAVm00

No a ten výsledek je natolik podobný, že podezření bylo během chvilky potvrzeno.
PlantUML přímo volá binárku dot, takže co se týče stavových diagramů, těžko nabídne víc než když ho použiju přímo.

[Reklama]

[qelurg]

Graphviz umožňuje jistou formu pozicování, zkuste se podívat na tyto mé poznámky.

<img style='width:200px' src='https://g.gravizo.com/svg?
  digraph G {
    X -> b1 -> b2 -> b3;
    X -> c1 -> c2 -> c3;
    X -> a1 -> a2 -> a3;
    b1 -> b2_1 -> b3;
  }
'/>
<img style='width:200px' src='https://g.gravizo.com/svg?
  digraph G {
    X -> b1 -> b2 -> b3;
    X -> c1 -> c2 -> c3;
    X -> a1 -> a2 -> a3;
    b1 -> b2_1 -> b3;
    {rank=same; a3 -> b3 -> c3 [style=invis];}
  }
'/>
<img style='width:200px' src='https://g.gravizo.com/svg?
  digraph G {
    X -> b1 -> b2 -> b3;
    X -> c1 -> c2 -> c3;
    X -> a1 -> a2 -> a3;
    b1 -> b2_1 -> b3;
    {rank=same; a3 -> b3 -> c3 [style=invis];}
    {a1[group=g1]; b1[group=g2]; c1[group=g3];
     a2[group=g1];  X[group=g2]; c2[group=g3];}
  }
'/>
<img style='width:200px' src='https://g.gravizo.com/svg?
  digraph G {
    X -> b1 -> b2 -> b3;
    X -> c1 -> c2 -> c3;
    X -> a1 -> a2 -> a3;
    b1 -> b2_1 -> b3;
    {rank=same; a3 -> b3 -> c3 [style=invis];}
    {b1[group=g2]; X[group=g2]; b3[group=g2]}
  }
'/>

[qelurg]

Tady ještě další:

**výška**

<img style='width:100px' src='https://g.gravizo.com/svg?
  digraph G {
    X -> a1 -> a2 -> a3;
    X -> b2;
    X -> c3;
  }
'/>
<img style='width:100px' src='https://g.gravizo.com/svg?
  digraph G {
    X -> a1 -> a2 -> a3;
    X -> b2;
    X -> c3;
    {rank=same; a2; b2;}
    {rank=same; a3; c3;}
  }
'/>

[Jerry999]

Graphviz umožňuje jistou formu pozicování...

Jasně zavření stavů do subgrafu s označením rank=same, znám. Tím si lze vynutit, že bubliny budou na stejném řádku. Někdy to opravdu pomůže k hezčímu grafu, akorát se špatně odhaduje, co to vlastně s ostatními stavy udělá.
O přidání neviditelné hrany jsem četl, je možné, že to někdy pomůže, ale jak takovou situaci předem poznat? To je podobné jako prohazování pořadí seznamu stavů, někdy to pomůže, ale proč to sakra nevyzkouší za mě ten program a nevybere variantu, kde bude nejméně křížení hran?

Vůbec netuším, co má dělat atribut group= o tom se manuálu vůbec nepíše?

[qelurg]

Group pomůže k vertikálnímu vyrovnání, vyzkoušejte si to a uvidíte.

[qelurg]

A obecne group slouží k seskupení vybraných nodů, které pak můžete dát třeba do společného rámečku.

[Renny09]

Nevim presne jestli to je v necem lepsi ale kdysi sem si hral s plantUML.
https://www.aktualne.cz/podle-expertu-se-v-ceske-republice-zmenily-trendy-ve-vyhleda/r~2fd51e18197b11ed8b4e0cc47ab5f122/
Mozna stoji za zkousku

Mimochodem, taky ji mám radši. Používám neustále.

[Filip Jirsák]

Zkuste se podívat na https://kroki.io, jestli tam náhodou nebude jiný algoritmus, který by vám vyhovoval lépe.

A nebo pak hledat něco, co neexportuje přímo do SVG, ale do GraphML, pak byste to mohl v editoru doladit.

[mikrom]

Ja sice komplikovanejsie stavove diagramy moc neuznavam, lebo vacsinou tam autor nieco zabudne zakreslit a potom cely ten diagram stoji za h***o, ale taketo diagramy umoznuje kreslit LaTeX package TikZ - vid napr.: https://texample.net/tikz/examples/tcp-state-machine/