Een graaf met negentig node-types wordt pas leesbaar als kleur iets betekent. Dit is de methode die we daarvoor gebruiken — plus de kant-en-klare stylesheet.
Neo4j Browser geeft elk node-label een willekeurige kleur. Dat werkt tot een stuk of tien types. Daarna kijk je naar een schaal met bolletjes waarin je niets meer terugvindt.
De voor de hand liggende oplossing — zelf kleuren toewijzen — levert een schema dat per node klopt maar als geheel wankelt. Dat was ook precies de eerste versie van ons GRiDS-schema: binnen één familie lagen de drie donkere niveaus vlak bij elkaar terwijl het lichtste ver wegsprong, en het punt waarop witte tekst zwart moest worden viel per familie ergens anders.
De oorzaak is methodisch, niet esthetisch. Wie met de hand kleuren kiest, krijgt ongelijke lichtheidsstappen. En zonder gelijke stappen bestaat er geen punt waar je consequent kunt omschakelen van witte naar zwarte tekst.
De oplossing is een perceptueel afgestemde kleurenwaaier — een palet waarin elke stap over alle kleurtonen heen op ongeveer dezelfde lichtheid ligt. Wij gebruiken de Tailwind CSS-waaier: 22 tonen × 11 stappen, expliciet daarop afgestemd. Dan wordt kleur een regel in plaats van een afweging.
Kleurtoon draagt de betekenis. Elke functionele familie krijgt één toon. Alles wat met labels te maken heeft is groen, alles wat met projecten te maken heeft is rood.
Verzadiging draagt het niveau. Datamodellen hebben bijna altijd een hiërarchie — container, groepering, item, sjabloon. Die vier krijgen altijd dezelfde vier stappen uit de waaier: 800, 600, 400, 200. Steeds 15 tot 20 procentpunt lichtheid uit elkaar, dus geen sprongen.
Tekstkleur volgt uit de rest. Stap 600 en donkerder krijgt witte tekst, stap 500 en lichter krijgt zwarte tekst. Omdat de waaier afgestemd is, klopt die grens in alle 22 tonen. In elke familie zonder uitzondering: de bovenste twee niveaus wit, de onderste twee zwart.
Daar komen nog twee praktische afspraken bij. De rand van een bol is altijd twee stappen donkerder dan de vulling, zodat vorm en kleur elkaar niet in de weg zitten. En node-types met miljoenen instanties krijgen bewust een lichte tint en een kleine diameter — anders overspoelen ze de weergave en zie je de structuur niet meer waar het je om ging.
Zet families in de volgorde waarin ze op de kleurcirkel staan, en laat verwante domeinen naast elkaar vallen. Iemand die het schema niet kent leest dan alsnog "dit hoort bij elkaar". Voor GRiDS levert dat deze indeling op:
| Domein | Kleurtonen |
|---|---|
| Portfolio | rood projecten · steen locaties · oranje assets · amber kosten |
| Onderhoud & semantiek | geel technische omschrijvingen · limoen classificatie · groen labels · smaragd eigenschappen · turkoois concepten |
| Eisen & toetsing | cyaan compliance · hemelsblauw wettelijk kader · blauw eisen |
| BIM | indigo objecten · violet modellen · paars IFC-brondata |
| Verwerking | fuchsia filters · roze mappings · rozerood exports |
| Kader | neutrale grijzen voor organisatie, gebruikers, bestanden en technische hulpnodes |
Neutrale tonen zijn voor kaderdomeinen: organisatie, toegang, bestandsopslag, technische hulpnodes. Verzadigde tonen blijven gereserveerd voor inhoudelijke families. Dat alleen al scheelt veel — de helft van wat je in een graaf ziet is kader.
Elke rij hieronder is één familie. Van links naar rechts loopt het niveau van container naar sjabloon, met het nummer van de stap uit de waaier erbij.
92 node-types en 84 relatietypes, kant en klaar. Sleep het bestand in het venster van
Neo4j Browser, of laad het via Browser Settings → Graph Stylesheet.
Terugdraaien met :style reset.
Genereren, niet tikken. Een stylesheet van negentig regels met de hand onderhouden is vragen om drift. Wij genereren hem uit een script waarin alleen de families en hun kleurtonen staan; de regels zitten in de generator. Een schemawijziging is dan één regel code in plaats van tachtig zoek-en-vervang-acties.
Zet geen commentaar in een .grass-bestand. De parser van Neo4j Browser is een eenvoudige tokenizer, geen CSS-engine. Documentatie hoort ernaast, niet erin.
Controleer je captions. Verwijst een caption naar een property die niet
bestaat, dan toont de Browser een lege bol zonder foutmelding. In GRiDS hebben de meeste
nodes een name, maar niet alle — waarden, afbeeldingen en overrides niet.
Als bijvangst dwingt zo'n inventarisatie je om alle labels te tellen, en dat legt structuurproblemen bloot die je anders niet ziet: lege containers, node-types die veel talrijker zijn dan verwacht, en resten van een vorige modelversie. De helft van de waarde van dit werk zat niet in de kleuren.
