UML készítése kódból

A könyv Design patterns fejezete alapján górcső alá vettem egy picit az elérhető UML megoldásokat, amik lehetővé teszik azt, hogy kód írással rajzoljunk diagramot, szóval nézzünk egy gyors körképet az elérhető megoldásokról.

UML kódból

Az UML lényegében egy vizuális leíró nyelv, ezért nem annyira meglepő ötlet, hogy kód segítségével állítsuk elő a rajzot. Mivel az UML elég sok diagram típust definiál, nekem meg specifikusan osztálydiagramokra volt szükségem, ebből a szempontból vizsgáltam az elérhető eszközöket.

Visual Studio Class Diagram

Az első ilyen eszköz, ami eszünkbe jut, az a Visual Studio Class Diagram eszköze, ami valójában nem egy igazi UML eszköz, mert elég sok jelölő hiányzik belőle, de alapvetően nem is UML eszköznek tervezték és ez meg is látszik rajta. Öröklés reprezentációjára és interfész implementáció jelölésére képes. A legnagyobb baj vele az, hogy a diagramot PNG és EMF formátumban tudja exportálni. Az EMF elméletileg vektorgrafikus lenne, ami az újra felhasználhatóságot, módosíthatóságot elősegítené. Azonban mivel ez egy 90-es évekből származó Microsoft formátum, kb. egy ingyenes szoftver sem támogatja a vektorgrafikus importját. A nagyobb bajom viszont az, hogy a Paint-en kívül (ami a raszter részét jeleníti meg) még a Microsoft saját termékei (Word, PowerPoint) sem támogatják rendesen.

Mermaid

A Mermaid manapság a de-facto szabvány, ha diagramok kódból való rajzolásáról beszélünk. Hozzátenném nem véletlenül. Azonban, ha class diagramról van szó, akkor bizony a képességei nem annyira kiemelkedőek, mint mondjuk egy timing diagram vagy flow chart esetén. A legnagyobb baja, hogy a szintaxisa nehézkes. Kicsit a Plant UML-re hasonlít, kicsit nem, szóval a dokumentációt igencsak olvasni kell, ami nem lenne baj, ha eléggé részletes lenne. Például generikus típusok esetén a „ paraméter jelölésénél sehol sincs leírva, hogy a `<` és `>` karakterek közti részt HTML-ként akarja interpretálni és a `~` jel használható escape karakterként. Mindezt honnan tudom? Természetesen GitHub issue böngészésből.

Az, hogy a dokumentáció nem elég részletes gyerekbetegség, amit viszonylag könnyen lehet orvosolni. Sokkal nagyobb baj, hogy a diagram elrendezését és azt, hogy hogyan köti a vonalakat az egyes elemek között, minimálisan vagy semennyire nem lehet módosítani a kód által és ez a probléma igazán nagy diagramok esetén jelentkezik, de már egy 3-4 osztályból álló modell esetén sem az igazi.

Ezen betegségekkel még együtt tudtam volna élni, de az igazán fájó pontja, hogy bár papíron tud SVG-t exportálni, ez nem szabványos SVG. Amit a Mermaid csinál az lényegében egy olyan SVG fájl, ami indokolatlanul HTML elemekkel van teletűzdelve (SVG foreign element). Ez gyakorlatilag azt jelenti, hogy böngészőn kívül semmivel sem lehet megnyitni a vektorgrafikus kimenetét, ami szerintem minimum problémás az újra felhasználhatóság miatt.

Weblap: https://mermaid.js.org/

Plant UML

A Plant UML tekinthető az eredeti kódból UML diagramot rajzoló megoldásnak. Ez egy Java-ban implementált megoldás, nagyon nagy tudással és lehetőségekkel és n+1 többé-kevésbé, de legtöbb esetben egymással sem kompatibilis implementációval. Mondhatnánk, hogy az Open Source előnye, hogy ha nem tetszik egy implementáció, akkor használhatunk egy másikat, de egy programozási vagy domain specifikus nyelv esetén szerintem ez inkább káros, mint hasznos. Ha ezektől eltekintünk, akkor megéri az erőfeszítést a megtanulása, mert tényleg sok mindent tud, de készüljünk fel, hogy erőfeszítést kell tenni abba, hogy mai szemmel nézve igazán jól kinéző diagramokat kapjunk.

Weblap: https://plantuml.com/

nomnoml

A nomnoml tudásában a Mermaid és a Plant UML között helyezkedik el. Amiért őrá esett a választásom az annak köszönhető, hogy a kevesebb néha több. A szerkesztője minimalista stílusú, a nyelvet kb 10 perc megtanulni és a diagram elrendezése egészen jól formázható a kód strukturálásával. Emellett az általa kreált SVG fájlok valódi SVG fájlok, tehát később szabadon módosíthatóak Inkscape vagy Illustrator segítségével és igazán bónusz, hogy a diagram létrehozásához használt kódot az SVG-be is belementi, így bármikor visszanyitható egy korábban mentett kép és módosítható anélkül, hogy extra erőforrást tennénk még a forráskód menedzselésébe is. Az alap stílus, amit használ meggyőző volt számomra, de CSS segítségével bármikor módosítható kb bármelyik elem megjelenése.

Weblap: https://nomnoml.com/