Skip to content
Snippets Groups Projects

WebOrgChart1

En un mot

À partir d'un simple fichier texte (une liste de liens hiérarchiques n / n+1 dans le répetoire orgas), WOC produit un pdf multipage avec les organigrammes des la structures, en tenant compte:

  • d'un fichier de configuration d'options fines (config.php)
  • d'un fichier d'ordre, indiquant d'afficher une page par direction par exemple (dans le répertoire orders)
  • d'un thème (décrivant les manières d'afficher les niveaux)2 (dans le répertoire themes)

Qui peut le plus peut le moins: WOC produit évidemment le même organigramme, en tout ou partie, en html dans le navigateur.

Vocabulaire

  • theme: une liste de niveaux d'étiquettes (couleur, largeur, hauteur, taille de police)
  • orgas: une liste de relations hiérarchiques (n / n+1)

Syntaxe des relations hiérarchiques (orgas)

Contrainte: le grand chef doit figurer sur la première ligne.

Les lignes du fichier doivent être de la forme

[code = ][niveau/fonction/]nom[/categorie] <relation> [code = ][niveau/fonction/]nom[/categorie]

exemple:

MM = assistant/Bras droit/Mickey Mouse/B -- P = ceo/Grand Sachem/Picsou/A

MM et P peuvent être utilisés par la suite, par exemple:

riri -- MM

Hierarchical relations

Simple relation

  • below (-- or -N)

direction/Executive director/Donald/B -- top/Financial director/Picsou/A

$lateral_child=0; (default)

img

  • variant

direction/Executive director/Donald/B -- top/Financial director/Picsou/A

$lateral_child=1;

img

Left and right relations

  • left (-L)

direction/Executive director/Donald/B -L top/Financial director/Picsou/A

img

  • right (-R)

direction/Executive director/Donald/B -R top/Financial director/Picsou/A

img

Lateral and below, left and right

  • A (-A)

direction/Executive director/Donald/B -A top/Financial director/Picsou/A

img

  • B (-B)

direction/Executive director/Donald/B -B top/Financial director/Picsou/A

img

  • b (-b)

dotted lines are done with lowcase letters

direction/Executive director/Donald/B -b top/Financial director/Picsou/A

img

blocks vs rakes

compact blocks

donald = direction/Executive director/Donald/B -N picsou = top/Financial director/Picsou/A loulou = service/assistant/Loulou/C -N donald riri = service/assistant/Riri/C -N donald fifi = service/assistant/Fifi/C -N donald fifi -0 picsou fifi -1 donald

And Two fonctionnal relations (you can add some easily)

  • A -0- B (solid line)
  • B -1- C (dashed line)

Recursive relations

For this

B -- A = direction/PDG/A
C = service/Service RH/C -- A
CC -- C
CD -- C
D -- A
E -- B
F -l A
G -r A
K -- D
H -l D
I -- H
J -r I
E -0- K
C -1- G

The system produces:

screenshot

Notice that the leaves are displayed in blocks (F G H and K L) to avoid a too large tree.

Step by step

Links

The link are defined like this

item link item

Abreviation

An item can be abreviate.

CEO = Chief Executive Officer

You can use CEO after like this

Agent -- CEO

Items

Persons in the organization are defined like this:

<status>/<position displayed>/<name>/<category>

While it is mandatory, you can tell only name, like this:

//name/

The status ? For the type of cards!

screenshot

The status can define the colors and the size of the card.

There is now an editor of profiles (12 items in a profile)

Hierarchical link

B -- A

screenshot

B will be displayed under A

Lateral links

E -- A
C -l A
F -l A
D -r A    

screenshot

Notice, you should have an item under A Otherwise, lateral links cannot exist.

Fonctional links

You can define free relations between persons in the data file with the relations -0- and -1-

Person 1 -0- Persons 2
Person 8 -1- CEO

-0- indicates: no dashed line -1- indicates: dashed line

Convertisseur du html vers pdf: wkhtmltopdf

J'ai testé:

  • jspdf (outil client): pas de rendu des lignes en pointillées, multipages pas simple du tout pour du html propre en pdf (il faudrait se contenter d'images)
  • weasyprint (outil serveur en python): mauvais rendu des largeurs pour les tableaux. Je me suis arrété à:
  • wkhtmltopdf: très bon rendu html et svg. Reste à régler un problème pour les liens internes.

Vous voulez une démo

Voir ici: https://elie.org/weborgchart

Cette démo est aussi un site gratuit de générateur d'organigramme qui peut très bien suffire pour de petites structures: on fournit une orga, un fichier d'ordre et WOC produit le pdf.

License

  • WebOrgChart est sous licence GPLv3 Affero
  • Leader-line (pour les tracés de lignes) est sous licence MIT
  1. Reconnaissons une dette. Après avoir considéré graphviz et Tikz comme outil pour présenter graphiquement des organigrammes, PHP-to-OrgChart (https://github.com/Awezome/PHP-to-OrgChart) m'a donné l'idée de faire en html. J'ai ajouté de la récursivité et d'autres liens hiérarchiques (latéraux), et des relations fonctionnelles entre les personnes, figurées par des lignes libres. Pour ces différentes raisons, WOC n'est pas un fork de PHP-to-OrgChart, mais un projet tout à fait différent, notamment dans son ambition.

  2. WOC intègre un éditeur de thèmes.