Skip to main content
A techpédia hivatalos oldalának a logója
A techpédia hivatalos oldalának a logója
A techpédia hivatalos oldalának a logója

Excalidraw: Amikor egyszerűbb lerajzolni, mint elmagyarázni

Olvasási idő: 11 perc

Nem tudom, ti hogy vagytok vele, de én az ilyen „whiteboard” dolgokban nem nagyon vagyok otthon. Mármint nem igazán kellett még használnom őket. Ha valami problémánk volt, megpingeltük a másikat, vagy írtunk egy jó kis üzenetet. Pedig egy ilyen alkalmazásnak azért megvan az értelme és a helye.

Gondolj csak bele: egy meetingen hirtelen fel kell vázolnod egy ötletet, meg kell mutatnod a többieknek, hogy mire gondolsz, vagy egyszerűen csak szeretnél valamit lerajzolni, mert szövegben nehéz elmagyarázni. Na de ilyenkor mit használnál? Őszintén? Nekem hirtelen fogalmam sem lenne.

Viszont, ahogy az nálam már szokás, elkezdtem alkalmazások után kutatni, hátha találok egy-két érdekes gyöngyszemet. Így került a látóterembe az Excalidraw. És bár elsőre ez is csak egy újabb online whiteboardnak tűnhet, azért van benne néhány dolog, ami miatt szerintem érdemes közelebbről is megnézni.

Mi ez az Excalidraw?

Az Excalidraw egy nyílt forráskódú, virtuális whiteboard, amivel különféle ábrákat, vázlatokat, diagramokat vagy akár egyszerű drótvázakat készíthetsz. A legfeltűnőbb sajátossága talán az, hogy nem akar mindenáron tökéletesen kinéző diagramokat készíteni, illetve a rajzok szándékosan kézzel rajzoltnak hatnak. (ezt majd látni fogod az egyik képen, ahol megpróbáltam a kreativitásomat megmutatni…hát nem nyert.)

És pont ettől van egy érdekes hangulata.

Nem olyan érzés, mintha egy vállalati prezentációt próbálnál összerakni, hanem tényleg olyan, mintha egy digitális táblára rajzolnál fel valamit. Az Excalidraw MIT licenc alatt elérhető nyílt forráskódú projekt. Maga az Excalidraw szerkesztő szabadon használható, és a projekt forráskódja nyilvánosan elérhető a GitHubon.

Excalidraw rajzfelület különböző alakzatokkal, kézzel írt szöveggel, nyíllal, jegyzettel és kerettel.
Ahogy már említettem, megpróbáltam a kreativitásomat kibontakoztatni. Kisebb-nagyobb sikerekkel. A vásznon több egyszerű alakzat és írás is szerepel, köztük egy ellipszis, egy rombusz, egy kör, egy ferde vonal egy nyíl, és kézzel írt „Rajzok:” felirat

Mire lehet használni a Excalidrawt?

Igazából elég sok mindenre.

Például készíthetsz vele:

  • egyszerű folyamatábrákat,
  • ötletvázlatokat,
  • rendszer- vagy hálózati rajzokat,
  • wireframe-eket,
  • egyszerű prezentációs ábrákat,
  • projektterveket,
  • brainstorminghoz használható vázlatokat.

Az Excalidraw főbb funkciói

Az Excalidraw egy végtelen vásznat használ, amin szabadon mozoghatsz és nagyíthatsz. Több alapvető rajzeszközt is találsz benne, például téglalapot, kört, rombuszt, vonalat, nyilat és szabadkézi rajzolást. Természetesen szöveget is hozzáadhatsz az ábrákhoz. A nyilakhoz feliratokat is készíthetsz, illetve az elemeket össze is kapcsolhatod egymással. Ez akkor lehet különösen hasznos, amikor valamilyen folyamatot vagy kapcsolatot szeretnél szemléltetni.

Képek használata

Nem csak rajzolni lehet. Képeket is beilleszthetsz a vászonra, így akár egy meglévő képernyőképet is használhatsz egy magyarázat alapjaként. Ez például egy alkalmazás bemutatásánál is jól jöhet, ha valamit ki szeretnél emelni egy képernyőképen.

Excalidraw vászon weboldalterv képernyőképpel és piros nyilakkal jelölt felületelemekkel.
Csináltam egy pillanatképet az oldalam „Hero” szakaszáról. Piros kézzel rajzolt nyilak mutatnak a weboldal elemeire, például a logóra, a navigációs menü pontjaira („Főoldal”, „Alkalmazások”, „Operációs rendszerek”, „Rólam”), valamint a kiemelt cselekvésre ösztönző gombokra. Tehát a nyilakat ilyen egyszerűen lehet használni akár egy képen is

Alakzatkönyvtárak

Az Excalidraw támogatja a shape library-k használatát is, így különböző előre elkészített elemeket használhatsz a saját rajzaidban. Ez akkor praktikus, ha nem mindig szeretnél mindent nulláról felrajzolni. Az ábrákat hozzá kell adni a vászonodhoz. Erre insturkciót is készítettek.

Excalidraw Library használata előre elkészített elemekkel
A már megnyitott „Shape Library” panel látható, amely előre elkészített rajzelemeket és ikonokat tartalmaz. A könyvtárban különböző technológiai logók, infrastruktúra- és diagramikonok, valamint kézzel rajzolt stílusú karakterek is elérhetőek

Exportálás

Az elkészült rajzokat többféle formátumban is felhasználhatod. Az Excalidraw támogatja többek között a PNG és SVG exportot, illetve a rajzot saját .excalidraw formátumban is elmentheted. A vágólapra is másolhatsz tartalmat. Ez azért fontos, mert nem kell az Excalidrawban hagynod az elkészült munkát. Ha csak egy képre van szükséged, exportálhatod és használhatod máshol.

Excalidraw projekt mentési lehetőségei
Három különböző mentési lehetőséget láthatunk. Az első opció a rajzfájl helyi mentése a számítógépre, amely később újra importálható. A második lehetőség egy csak olvasható megosztható hivatkozás létrehozása. A harmadik opció az Excalidraw+ munkaterületre történő mentése
Excalidraw exportálási ablak PNG és SVG képformátumok kiválasztásával.
Exportálási beállítások érhetők el, például háttér hozzáadása, sötét mód használata, „jelenetadatok” beágyazása és nagyítási méret kiválasztása. Az ablak alján PNG és SVG export gombok, valamint a vágólapra másolás lehetősége található. A funkció lehetővé teszi a rajzok különböző képformátumokba történő mentését és megosztását.

Együtt is lehet rajzolni

Az Excalidraw nem csak arra használható, hogy egyedül rajzolgass rajta. Az excalidraw.com webes alkalmazás valós idejű együttműködést is támogat, vagyis többen dolgozhattok ugyanazon a vásznon. Ez például egy online meeting alatt lehet hasznos. Nem kell hosszasan magyaráznod, hogy mit szeretnél mondani. Megnyitjátok a közös vásznat, és elkezditek felrajzolni az ötletet. Az elkészült rajzhoz megosztható linket is létrehozhatsz, így másokkal is könnyebben megoszthatod.

Excalidraw együttműködési és megosztási párbeszédablaka a rajzvászon felett.
Az ablak két lehetőséget kínál: „Live collaboration” a valós idejű együttműködéshez, valamint „Shareable link” egy megosztható hivatkozás létrehozásához. A középen található gombok a „Start session” és az „Export to Link” funkciókat jelenítik meg.

Kell hozzá regisztráció? Ingyenes vagy fizetős?

Az Excalidraw alapvetően ingyenesen használható, és ehhez még regisztrációra sincs szükség. A Free csomagban megkapod a teljes szerkesztőt, az alap exportálási lehetőségeket és az együttműködést is, tehát nem kell Plus csak azért, hogy másokkal közösen dolgozz.

Ha viszont felhőben szeretnéd tárolni a munkáidat, több jelenetet és mappát kezelnél, prezentációkra, kommentekre, fejlettebb megosztási lehetőségekre vagy csapatfunkciókra van szükséged, akkor ott van az Excalidraw+. A Plus jelenleg 6 dollár/felhasználó/hó, és a Free csomaghoz képest többek között felhős mentést, prezentációkat, fejlettebb együttműködési lehetőségeket, valamint PDF- és PPTX-exportot kínál.

Excalidraw alkalmazás megnyitott oldalsó menüvel és rajzpéldákkal a vásznon.
A menüben több lehetőség érhető el, például Megnyitás, Mentés, Exportálás képbe, Élő kollaboráció és További beállítások.

Mi a helyzet az operációs rendszerekkel?

Itt van egy apró érdekesség.

Az Excalidraw elsődlegesen webes alkalmazásként használható, így sem Windowson, sem Linuxon és még MacOS-en sem kell külön natív programot keresned hozzá: egyszerűen megnyitod a böngészőben. Az Excalidraw hivatalos projektje korábban rendelkezett Electron-alapú asztali változattal is, ezt azonban a projekt már nem fejleszti, és a repository archiválva lett. A fejlesztők a webes verziót részesítették előnyben. Ez szerintem nem feltétlenül probléma. Egy ilyen alkalmazásnál kifejezetten kényelmes, hogy nem kell külön telepítővel, csomagkezelővel vagy függőségekkel foglalkozni.

Amit érdemes figyelembe venni

Az Excalidraw erőssége egyben bizonyos szempontból a korlátja is.

A kézzel rajzolt megjelenés nagyon jól áll neki, de ha valaki tűpontosan megtervezett, klasszikus üzleti diagramokat szeretne készíteni, lehet, hogy nem ezt fogja választani. Az Excalidraw inkább arra való, hogy gyorsan megmutass valamit. Egy ötletet. Egy folyamatot. Egy elképzelést. Egy egyszerű rendszer felépítését. Vagy bármit, amit könnyebb lerajzolni, mint elmagyarázni. És ez jól is van így.

Saját véleményem a Excalidrawról

Mint ahogy már a bevezetőmben is említettem, én alapvetően nem vagyok nagy whiteboard-használó.

Eddig nem igazán volt olyan helyzetem, amikor azt éreztem volna, hogy „na, ehhez most kell egy whiteboard”. Az Excalidraw viszont pont azért tetszik, mert nem próbálja túlkomplikálni ezt az egészet. Megnyitod, és ott van előtted egy üres vászon. Nincs szükséged arra, hogy előtte megtanuld használni. Kiválasztod a téglalapot, rajzolsz egyet, írsz bele valamit, húzol egy nyilat, és máris készítettél egy egyszerű ábrát. A kézzel rajzolt stílus pedig szerintem kifejezetten jól működik ennél. Nem kell azon gondolkodni, hogy minden vonal pixelre pontos legyen. Ha egy kicsit „rajzos”, az belefér. Sőt, itt pont ez a lényeg. Én például egy meeting közben simán el tudom képzelni, hogy előkerülne. Ha valamit már harmadszor próbálunk elmagyarázni egymásnak szövegben, lehet, hogy egyszerűbb lenne inkább felrajzolni.

Excalidraw Draw to Shape menüje megnyitva az alakzatfelismerő funkció bemutatására.
A menüben kiemelve szerepel a „Draw to shape” funkció, amely automatikusan szabályos alakzattá alakítja a kézzel rajzolt formákat. A menüben további lehetőségek is láthatók, például Insert image, Frame tool, Web Embed és AI-alapú generálási funkciók.

Kinek lehet hasznos az Excalidraw?

Szerintem főleg annak, aki gyakran dolgozik ötletekkel, folyamatokkal vagy vizuális magyarázatokkal.

Hasznos lehet például:

  • fejlesztőknek,
  • projektcsapatoknak,
  • tervezőknek,
  • tanároknak és diákoknak,
  • meetingekhez,
  • brainstorminghoz,
  • gyors wireframe-ekhez,
  • egyszerű diagramok készítéséhez.

De igazából nem kell hozzá különleges munkakör.

Gyakori kérdések az Excalidraw-ról

Ingyenes az Excalidraw?

Igen. Az alap Excalidraw szerkesztő ingyenesen használható és nyílt forráskódú. A projekt emellett Excalidraw+ néven fizetős szolgáltatást is kínál további funkciókkal.

Nyílt forráskódú?

Igen. Az Excalidraw nyílt forráskódú projekt, MIT licenc alatt.

Kell hozzá regisztráció?

Az alap szerkesztő használatához nem szükséges regisztráció.

Milyen rendszereken használható?

Az Excalidraw elsősorban webes alkalmazásként használható, így egy támogatott modern böngészőből Linuxon, Windowson vagy macOS-en is elérhető.

Lehet vele együtt dolgozni másokkal?

Igen. Az excalidraw.com támogatja a valós idejű együttműködést és a megosztást.

Milyen formátumba lehet exportálni?

Többek között PNG és SVG formátumba, valamint saját .excalidraw formátumban is elmentheted a rajzot.

Van magyar nyelv?

Az Excalidraw támogatja a lokalizációt, de a magyar nyelvi felület aktuális állapotát érdemes közvetlenül az alkalmazásban ellenőrizni.

Hivatalos oldal

Az Excalidraw webes változatát itt találod: 👉 Excalidraw

A projekt forráskódja GitHubon érhető el: 👉 Excalidraw GitHub

A hivatalos fejlesztői dokumentáció pedig itt található: 👉 Excalidraw dokumentáció

Kapcsolódó cikkek

👉 theSVG – Több mint 6500 SVG ikon fejlesztőknek és designereknek

👉 Icones – Több száz open source ikoncsomag egyetlen keresőben

Vissza

Köszi, ha megosztod!

Keresel valamit?

Hasonló jó kis cikk(ek):

Porcsin László

Nyílt forráskód rajongó
Régóta a nyílt forráskód megszállottja vagyok már. Szeretem, ha a rendszerem nem dumál vissza, amikor kérek tőle valamit, és főleg nem csinál olyan dolgokat, amire egyáltalán nem kértem meg. Legyen átlátható, legyen tiszta, ne legyenek rejtett trükkök. Ennyi az egész.