Contexte
Selma est un template React/TypeScript conçu pour explorer des taxonomies complexes dans le navigateur. L’exemple embarqué retrace l’évolution des systèmes d’écriture : un jeu de données à la fois arborescent et multiparent qui illustre bien les capacités du template.
Architecture
L’application repose sur React + Vite pour le rendu, React Flow et ELK.js pour le layout automatique des graphes, et Tailwind CSS pour le style. Les données sont entièrement contenues dans public/ :
public/data/nodes.json: propriétés visuelles des nœuds (couleur, icône, tags)public/data/taxonomies/*.json: relations parent-enfant par vue taxonomiquepublic/details/<lang>/<nodeId>.md: contenu Markdown localisé par nœudpublic/locales/<lang>/: chaînes de l’interface et labels
Caractéristiques
- 4 modes de visualisation : Graph Organique, Graph Compact, Liste arborescente, Colonnes Miller
- Support DAG : nœuds à plusieurs parents détectés automatiquement
- Taxonomies multiples : plusieurs classifications commutables sur le même jeu de nœuds
- Filtrage par tags : états neutre / inclus / exclu, avec modes union et intersection
- i18n : interface et contenu Markdown localisés via
i18next - Export : SVG, PNG, JPG, arbre ASCII ; impression Markdown des fiches nœuds
Impact
Selma sert de point de départ pour créer une taxonomie sans développer d’interface sur mesure. Il suffit de cloner le dépôt, remplacer le contenu de public/ par sa propre donnée, et déployer. Une démo est disponible sur Hugging Face Spaces et la documentation sur GitHub Pages.