Journal Pikchr : un langage pour décrire des diagrammes SVG

Posté par  (site web personnel) . Licence CC By‑SA.
Étiquettes :
43
22
mai
2021

Bonjour Nal,

J'ai découvert il y a peu Pikchr, un petit langage sympa pour décrire des diagrammes. Le langage est inspiré du vénérable PIC, sauf qu'avec quelques additions sympas et, surtout, le logiciel produit du SVG et pas une image. Parmi les intérêts du langage, on a sa syntaxe simple à lire, des mots-clés variés qui permettent d'éviter d'avoir à écrire des coordonnées à la main, ainsi que le côté léger de l'outil, facile à intégrer ici ou là avec des langages de balisage légers comme markdown.

Le logiciel a été créé par l'auteur de SQLite et du gestionnaire de version Fossil, donc c'est plutôt du solide et ça m'a l'air bien testé. Le logiciel est néanmoins né il y a moins d'un an : les premiers commits datent d'août de l'an dernier !

Il couvre des besoins similaires à ceux couverts par des logiciels graphiques comme Dia, sans spécialisation pour un type de diagramme particulier (UML ou autre). Contrairement à graphviz et son langage dot, l'idée n'est pas de visualiser sous forme de graphe des données, mais de faire un diagramme pédagogique pour illustrer une documentation. C'est donc moins automatique, mais plus flexible pour placer les choses où on veut. L'idée n'est pas non plus de produire, après lecture de centaines de pages de documentation et beaucoup de minutie, des diagrammes très vendeurs comme avec Tikz pour LaTeX. Pikchr se situe un peu entre ces deux extrêmes.

Un cas parlant d'utilisation : tous les diagrammes de la documentation SQLite utilisent Pikchr maintenant. Les vieux diagrammes étaient générés par un script fait maison qui produisait des images et non du SVG, ce qui avait quelques inconvénients.

À quoi ça ressemble en pratique ? Par exemple, on écrit des lignes du genre :

line dashed right from 0.3cm below start of previous line

ou des choses plus compliquées comme:

box; move; circle; move; cylinder
arrow from first box.s \
  down 1cm \
  then right until even with first cylinder \
  then to first cylinder.s

Le langage est simple à prendre en main et n'a pas beaucoup de fonctionnalités de programmation. On n'y trouvera par exemple pas de boucles, mais juste ce qu'il faut pour simplifier un peu la maintenance : macros avec des arguments et des variables.

Au besoin, il est facile de générer du code pour Pikchr avec un langage de programmation. Un des avantages est que le langage peut s'intégrer facilement à d'autres outils ou langages de balisage et, en particulier, il est conçu pour qu'il soit possible, de façon sûre, de l'utiliser sur un serveur pour produire des diagrammes écrits par les utilisateurs d'un site.

Par exemple, il est possible de tester le logiciel sur le site lui-même ! Ça permet de jouer un peu avec les exemples.

Je ne sais pas si la version en outil en ligne de commande est déjà dispo sur certaines distributions. Autrement, c'est très facile à compiler. À partir du code décrivant la grammaire (décrite dans un langage similaire à Yacc, mais conçu à l'origine pour SQLite) et le comportement du programme, un seul fichier C contenant l'ensemble du programme pikchrc.c est mis à disposition pré-généré. On peut donc facilement compiler (avec gcc ou clang) en un exécutable avec la commande :

cc -DPIKCHR_SHELL -o pikchr -lm pikchr.c

Et hop, le tour est joué !

  • # Top ! À creuser

    Posté par  (site web personnel, Mastodon) . Évalué à 6.

    À chaud ça m'a l'air d'être le genre de langage très adapté pour la conception de diagrammes d'architecture … J'avais cherché à l'époque (2/3 ans) et j'avais abandonné l'idée de facilement produire des schémas cadrés sans passer par des outils wysiwyg.

    • [^] # Re: Top ! À creuser

      Posté par  . Évalué à 6.

      J'ai pas encore eu le temps de lire l'article, mais ça a l'air prometteur.
      En attendant, pour tes diagrammes, tu as essayé PlantUML ?

    • [^] # Re: Top ! À creuser

      Posté par  (site web personnel, Mastodon) . Évalué à 3. Dernière modification le 22 mai 2021 à 19:50.

      Pour faire des schémas textuellement (sans wysiwyg), comme le mentionne le journal, il a PGF/TikZ qui n'est malheureusement connu que dans l'univers *TeX… (mais il me semble qu'on peut l'utiliser de manière autonome aussi.) Il y a aussi PIC, plus/moins simple/avancé mais complet et qui lui n'est hélas connu que dans l'univers *ROf… Le logiciel présenté par ce journal est un cousin de PIC dans la syntaxe (j'ai noté quelques différences mais je devrais pouvoir exploiter la plupart de mes productions sans modification.) Il y a enfin (à ma connaissance mais peut-être qu'il y a d'autres solutions) l'écriture directe en SVG (ce qui se fait très bien manuellement pour des trucs pas trop compliqués, mais on peut générer à partir d'un ensemble de primitives dans un langage de script de son choix)

      “It is seldom that liberty of any kind is lost all at once.” ― David Hume

      • [^] # Re: Top ! À creuser

        Posté par  (site web personnel, Mastodon) . Évalué à 4.

        Mon objectif est (était) de construire des schémas représentant des blocs fonctionnels, des flux de données, des flux tout court, des infos associées, etc. Le SVG peut tout à fait convenir mais c'est beaucoup trop bas niveau.

        Scripter ne répond pas non plus dans la mesure où ce que je veux faire est décrire un schéma, pas générer dynamiquement des trucs.

        • [^] # Re: Top ! À creuser

          Posté par  (site web personnel, Mastodon) . Évalué à 9.

          Oui, j'avais compris :-) En fait je disais juste que je connaissais deux solutions mais qu'on pouvait facilement passer à côté parce-que chacune d'entre elle est lié à un écosystème donné (pour la même raison, il en existe certainement d'autres que j'ignore.) Du coup on peut se réjouir de ce petit programme qui offre une syntaxe PIC-like/compatible sans devoir passer par (g|n|t)roff et donc d'avoir quelque chose sans écosystème dédié, comme graphviz (dont le seul défaut et la principale qualité est d'être spécialisé graphes avec placement calculé de façon automatique) et gnuplot

          Je suis bien conscient que le SVG est un peu trop bas niveau si on veut faire des choses évoluées rapidement/simplement. C'est pour ça que j'évoquais l'idée d'écrire des primitives d'abstraction pour son langage de scripting, un peu comme si on invente un langage de plus haut niveau comme les précédents. Je n'ai personnellement pas fait l'exercice, mais je me suis rendu compte que d'autres l'on fait lorsque j'ai regardé si on pouvait trouver des choses pour notre dokuwiki (donc PHP+HTML+JS+CSS, et le résultat peut être parfois du PNG) :

          Ces PreuvesOuiConcept sont des bases intéressantes malgré leurs limitations (hormis A2S, qui peut vite être laborieux, on est souvent limité à des types précis de dessins)

          “It is seldom that liberty of any kind is lost all at once.” ― David Hume

          • [^] # Re: Top ! À creuser

            Posté par  (site web personnel) . Évalué à 5.

            Aurais-tu sous la main un outil pour faire graphiquement un plan de réseau ? (c'est pour une installation très statique industrielle)

            "La première sécurité est la liberté"

            • [^] # Re: Top ! À creuser

              Posté par  . Évalué à 6.

              Peut être diagrams.net anciennement draw.io

              • [^] # Re: Top ! À creuser

                Posté par  (site web personnel) . Évalué à 5.

                Excellent.

                Est-ce qu'il existe un outil qui génère ce genre de diagramme à partir d'une description textuel (adresse IP, switch, ordinateur, lien) ? Le genre de description que l'on peut mettre dans un git et faire vivre, puis on génère une image pour le wiki ou la doc.

                "La première sécurité est la liberté"

                • [^] # Re: Top ! À creuser

                  Posté par  . Évalué à 9.

                  Le seul que je connaisse, c'est nwdiag.

                  « Rappelez-vous toujours que si la Gestapo avait les moyens de vous faire parler, les politiciens ont, eux, les moyens de vous faire taire. » Coluche

                • [^] # Re: Top ! À creuser

                  Posté par  (site web personnel, Mastodon) . Évalué à 2.

                  une série d'outils de dessins par description textuelle de blockdiag.com parmi lesquels nwdiag qu'on peut tester en ligne

                  À noter que le format PIC, présenté dans ce journal, est un format de description de dessin assez générique pour faire ce que tu veux aussi. Dans le principe il se rapprocherait un plutôt de Draw.io/Diagram.net où tu poses tes boîtes et leurs liaisons avec un contrôle fin et manuel.
                  À l'inverse, NwDiag utilise un fichier de variables (qui n'est pas sans faire penser à un struct traduisant un YAML/JSON de liste de dictionnaires de liste) et génère un graphique autocalculé, comme on ferait avec un GraphViz ou un FlowChart.js

                  “It is seldom that liberty of any kind is lost all at once.” ― David Hume

  • # Excellent

    Posté par  (site web personnel) . Évalué à 3.

    Belle découverte, merci.
    J'imagine déjà une intégration à hugo ou sphinx pour produire les schémas de documentation…

    • [^] # Re: Excellent

      Posté par  (site web personnel) . Évalué à 6.

      Pour MkDocs, il y a déjà l'extension kroki qui regroupe tout ce qui se fait (ou presque) en petit moteur de rendu graphique.

      Sinon, le site de krok¡ permet de générer en ligne une foule de type de diagramme. C'est libre, et ça s'installe au besoin avec une ligne de Docker.

      La liste d'exemples est la plus parlante.

  • # concurrent ou complément : mermaid

    Posté par  . Évalué à 7.

    Il existe aussi Mermaid qui est directement intégré dans le markdown de gitlab : https://docs.gitlab.com/ee/user/markdown.html#mermaid

    version live : https://mermaid-js.github.io/mermaid-live-editor/

    • [^] # Re: concurrent ou complément : mermaid

      Posté par  (site web personnel, Mastodon) . Évalué à 5.

      Je verrai Mermaid comme quelque chose d'intermédiaire entre GraphViz et Pikchr car il ne permet pa de faire tout ce qui est possible avec ce dernier mais permet de réaliser simplement les schémas les plus courants dont les graphes.

      “It is seldom that liberty of any kind is lost all at once.” ― David Hume

  • # frises chronologiques

    Posté par  . Évalué à 3.

    Bonjour,

    Ce n'est pas tout à fait le même sujet, mais connaîtriez-vous un système sur le même principe qui générerait un frise chronologique sous forme graphique à partir d'un fichier texte descriptif ? J'ai cherché plusieurs fois sans trouver.

    • [^] # Re: frises chronologiques

      Posté par  (site web personnel) . Évalué à 8. Dernière modification le 27 mai 2021 à 11:01.

      Il y a longtemps j'ai écrit blueprint:

      https://github.com/foretspaisibles/blueprint

      qui fait des dessins comme ça

      Frise chronologique

      https://github.com/foretspaisibles/blueprint/blob/master/Library/Assets/example_timeline-0.png
      à partir de fichiers qui ressemblent à ça:

      beginfig(0)

  beginroadmap;

  % Important time points
  time "WEEK 1",  7.0;
  time "WEEK 2", 14.0;
  time "WEEK 3", 21.0;
  time "WEEK 4", 28.0;
  time "WEEK 5", 35.0;


  phase "Initial\\Contact";

  % Initial Meeeting
  milestone 0, 1.0,  1;
  annotation "Initial Meeting",         12h, overline2;
  annotation "Initial Meeting",          6h, underline2;


  phase "Planning";

  % Assessment
  milestone 1, 2.0,  2;
  annotation "Needs\\Assessment",       11h, overline1;
  annotation "Needs Assessment\\Feedback",   6h, underline1 + u*right;
  …

      Pour essayer tu as besoin de metapost (typiquement texlive), bmake et bsdowl … mais si tu es interessé par cette possibilité on peut regarder ensemble pour faire une image docker par exemple, qui permet d'utiliser le programme directement.

      • [^] # Re: frises chronologiques

        Posté par  . Évalué à 2.

        Merci.
        Je recherchais quelque chose plus orientée illustration historique ou biographique un peu comme fait cet outil en ligne (non libre) http://frisechronos.fr/

        • [^] # Re: frises chronologiques

          Posté par  (site web personnel) . Évalué à 3.

          Ah ça me paraît largement faisable, si tu as un compte GitHub tu peux ajouter un ticket dans https://github.com/foretspaisibles/blueprint/issues comme ça tu auras des nouvelles. (J'espère que ce n'est pas trop pressé! :-) )

        • [^] # Re: frises chronologiques

          Posté par  (site web personnel, Mastodon) . Évalué à 3.

          D'après l'exemple précédant,

          • time "la date", graduation pour poser les dates au milieu
          • phase "Le nom" pour la période, et il lui sera associé une couleur
          • dans la période, milestone niveau, graduation, durée
            • je suppose que le niveau, de 0 à 2 pour l'instant, indique l'importance relative par des effets (graisse, corps, éloignement)
            • la graduation serait le point de départ absolu sur l'échelle
            • la durée serait la quantité rajoutée donc la fin relative sur l'échelle
            • les flèches sont calculées pour pointer au milieu de la plage/durée
          • pour chaque milestone, on a des annotation "libelé", temps, position
            • le libelé est le texte affiché ok
            • la durée estimée ?
            • l'emplacement haut (overlineX) ou bas (underlineX) avec X allant de 1 à 3

          Donc pour l'exemple affiché on aura quelque chose comme

          beginfig(0)
  beginroadmap;

  time "1790", 2.0;
  time "1795", 7.0;
  time "1815", 9.0;

  phase "La Révolution\nde 1789 à 1792";
  milestone 0, 1.0, 3.9;
  annotation "Prise de la bastille\n14/07/1789", 12h, overline2;

  phase ""; % no name
  milestone 1, 4.8, 0.1;
  annotation "Proclammation de la République\n22/09/1792", 12h, oveline2;

  phase "La Terreur\n01/03/1793 - 01/07/1794";
  milestone 1, 5.1, 1.4;

  phase "Cent-Jours\n01/03/1815 - 22/06/1815";
  milestone 1, 9.1, 1.0;

  endroadmap;
endfig;

          Au lieu d'avoir des rectangles colorés on aura des cercles colorés, ça défrise aussi. ;-D Le seul truc qui fait défaut est la césure (1796……1814) Justement, me demande si on peut faire des millésimes hors phase (au début, avant la première)

          Sinon, après coup, je me suis rendu compte que ce n'est pas la durée qui est indiquée pour l'annotation mais sa position horaire sur le cercle, n'est-ce pas ?

          “It is seldom that liberty of any kind is lost all at once.” ― David Hume

          • [^] # Re: frises chronologiques

            Posté par  (site web personnel) . Évalué à 4.

            Sinon, après coup, je me suis rendu compte que ce n'est pas la durée qui est indiquée pour l'annotation mais sa position horaire sur le cercle, n'est-ce pas ?

            Oui c'est ça les 6h, 7h etc. indiquent l'angle de la petite réglette qui mène à l'annotation.

            • [^] # Re: frises chronologiques

              Posté par  (site web personnel, Mastodon) . Évalué à 3. Dernière modification le 28 mai 2021 à 05:49.

              Top :-D Et pour le reste j'ai bon ? (en fait ce qui manque c'est une doc de récap de ce type.) J'ai un petit doute quand au « niveau » des millésimes :

              • dans la période, milestone niveau, graduation, durée
                • je suppose que le niveau, de 0 à 2 pour l'instant, indique l'importance relative par des effets (graisse, corps, éloignement)

              …parce-que j'ai l'impression que le « style » (ou les effets) est indiqué par le X accolé à l'emplacement/positionnement

              • pour chaque milestone, on a des annotation "libelé", temps, position
                • l'emplacement haut (overlineX) ou bas (underlineX) avec X allant de 1 à 3

              “It is seldom that liberty of any kind is lost all at once.” ― David Hume

              • [^] # Re: frises chronologiques

                Posté par  (site web personnel) . Évalué à 3.

                https://github.com/foretspaisibles/blueprint/blob/master/pm/timeline.mp#L88

                Je vois (7ans plus tard, donc je redécouvre complètement) que ce n'est pas trop mal documenté.

                Le style est juste fonction de l'importance, comme la taille de la grosse pastille colorée.

                Le overlineX indique juste la position du centre du label, mais comme c'est METAPOST (un peu spécial) il peut il y avoir des inconnues ou des relations – du coup on indique la position du label en indiquant la hauteur de sa position (overline 1 , 2 ou 3 ou bien underline 1, 2, 3 pour aller sous la frise).

Suivre le flux des commentaires

Note : les commentaires appartiennent à celles et ceux qui les ont postés. Nous n’en sommes pas responsables.