Design Systems as Knowledge Graphs
5 hours ago
- #documentation
- #design systems
- #knowledge graphs
- The traditional design system documentation resembles linear product docs but could be more effective as small, addressable chunks.
- Design systems are hyperobjects akin to knowledge graphs, capturing decisions, patterns, and history, rather than just products or libraries.
- Knowledge graphs interlink entity descriptions with semantic metadata, enabling data integration and sharing, as seen in tools like Roam Research and Obsidian.
- Transclusion allows embedding minimal content chunks (e.g., tokens, components) across contexts, ensuring updates propagate and revealing system relationships.
- Bidirectional links make dependencies (e.g., between Button and Icon) visible from both sides, aiding navigation and visualization, similar to features in knowledge graph apps.
- Fragments (like Wikipedia's red links) represent undefined future elements in design systems, encouraging contribution by highlighting gaps.
- Queries enable users to ask questions of the design system (e.g., via GraphQL APIs) for immediate answers, moving beyond browsing to interactive exploration.
- Applying knowledge graph concepts can transform design system docs into collaborative, remixable tools that scale knowledge across large teams.