Magazine Informatique

Créer un organigramme en Html et Css

Publié le 25 juin 2014 par Mike Lecomte

Afin de réaliser un organigramme (Organization chart en anglais), plusieurs solutions sont disponibles :

Une solution élégante et responsive, en css : http://codepen.io/siiron/pen/aLkdE

Responsive Organization Chart - CodePen

Une solution basée sur Jquery, plutôt bien faite : https://github.com/caprica/jquery-orgchart
V
oir les démos : http://www.capricasoftware.co.uk/projects/jquery-orgchart/demos.html

Caprica Software JQuery Org Chart Live Demos Page

un exemple pour du share point : https://github.com/Aymkdn/OrgChart-JS-Sharepoint

Il existe même une solution proposée par Googlehttps://developers.google.com/chart/interactive/docs/gallery/orgchart

Visualization- Organizational Chart - Google Charts — Google Developers

Ces solution suffisent pour la majorité des cas, mais lorsque ça devient un peu plus compliqué en terme de hiérarchie, on est un peu coincé.

Pour des cas plus évolués,  ma préférence va vraiment à JsPlumb, permettant de relier des éléments entre eux via jquery, les démos sont bluffantes : http://jsplumbtoolkit.com/demo/flowchart/dom.html

jsPlumb 1 6.2 demo - flowchart (Vanilla)


Vous pourriez être intéressé par :

Retour à La Une de Logo Paperblog

Ces articles peuvent vous intéresser :

A propos de l’auteur


Mike Lecomte 34 partages Voir son profil
Voir son blog

l'auteur n'a pas encore renseigné son compte l'auteur n'a pas encore renseigné son compte l'auteur n'a pas encore renseigné son compte

Dossiers Paperblog

Magazine