﻿﻿{"id":1741,"date":"2025-12-03T10:01:09","date_gmt":"2025-12-03T09:01:09","guid":{"rendered":"https:\/\/elearningsamba.com\/index.php\/cascii-un-editeur-de-diagrammes-ascii-qui-tient-dans-un-fichier-html\/"},"modified":"2025-12-03T10:01:09","modified_gmt":"2025-12-03T09:01:09","slug":"cascii-un-editeur-de-diagrammes-ascii-qui-tient-dans-un-fichier-html","status":"publish","type":"page","link":"https:\/\/elearningsamba.com\/index.php\/cascii-un-editeur-de-diagrammes-ascii-qui-tient-dans-un-fichier-html\/","title":{"rendered":"Cascii &#8211; Un \u00e9diteur de diagrammes ASCII qui tient dans un fichier HTML"},"content":{"rendered":"<p>Dessiner des sch\u00e9mas en <strong>ASCII art<\/strong>, c\u2019est un peu le sport national des devs qui documentent leur code dans des fichiers texte. Sauf que jusqu\u2019ici, soit on se tapait \u00e7a \u00e0 la main caract\u00e8re par caract\u00e8re, soit on passait par des outils en ligne qui demandent de se cr\u00e9er un compte et gardent vos diagrammes sur leurs serveurs. Heureusement, Cascii r\u00e8gle le probl\u00e8me puisqu\u2019il s\u2019agit d\u2019un \u00e9diteur graphique complet qui tient dans un seul fichier HTML !<\/p>\n<p>Et comme Cascii est \u00e9crit en JavaScript pur, y\u2019a aucune d\u00e9pendance, aucun framework, aucun npm install\u2026etc. Vous t\u00e9l\u00e9chargez juste le fichier HTML, vous l\u2019ouvrez dans votre navigateur, et c\u2019est parti mon kiki.<\/p>\n<p>Et pour l\u2019installer, une commande suffit :<\/p>\n<div class=\"highlight\">\n<pre class=\"chroma\"><code class=\"language-fallback\" data-lang=\"fallback\"><span class=\"line\"><span class=\"cl\">curl https:\/\/cascii.app -o cascii.html &amp;&amp; open cascii.html\n<\/span><\/span><\/code><\/pre>\n<p>Ahaha ouais c\u2019est la commande curl la plus nulle de l\u2019histoire des commandes curl mais \u00e7a vous montre que je n\u2019abuse pas.<\/p>\n<p>C\u00f4t\u00e9 fonctionnalit\u00e9s, on a donc tout ce qu\u2019il faut pour dessiner des diagrammes propres. Des lignes libres, des lignes en escalier, des carr\u00e9s, des cercles, des losanges, du texte, des tableaux. Un syst\u00e8me de calques permet d\u2019organiser les \u00e9l\u00e9ments et de les grouper. Le plus malin, je trouve, c\u2019est les \u201cjointures intelligentes\u201d qui connectent automatiquement les formes entre elles\u2026 parce que dessiner des fl\u00e8ches qui arrivent pile au bon endroit \u00e0 la main, c\u2019est l\u2019enfer. M\u00eame comme \u00e7a, je suis pas dou\u00e9, cela dit\u2026<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/korben.info\/cdn-cgi\/image\/width=1200,fit=scale-down,quality=90,f=avif\/cascii-editeur-diagrammes-ascii-navigateur\/cascii-editeur-diagrammes-ascii-navigateur-1.webp\" alt=\"\" loading=\"lazy\"><\/p>\n<p><strong>Ne le jugez pas\u2026<\/strong><\/p>\n<p>L\u2019\u00e9diteur propose plusieurs charsets tels que ASCII classique ou Unicode pour ceux qui veulent des lignes plus jolies et il y a 3 styles de lignes (pointill\u00e9es, solides fines, solides \u00e9paisses) ainsi que des fl\u00e8ches directionnelles. C\u00f4t\u00e9 th\u00e8mes, du sombre, du clair, ou un mode \u201cconsole\u201d pour les nostalgiques du terminal.<\/p>\n<p>La sauvegarde se fait automatiquement dans le stockage local du navigateur, donc m\u00eame si vous fermez l\u2019onglet par erreur, votre travail n\u2019est pas perdu et pour partager ou archiver, il y a un export en Base64 qui permet de tout r\u00e9cup\u00e9rer plus tard. Si vous utilisez la version h\u00e9berg\u00e9e sur cascii.app, vous pouvez aussi g\u00e9n\u00e9rer des liens courts pour partager vos cr\u00e9ations.<\/p>\n<p>Le projet est sous licence Apache 2.0 et le code source est dispo sur<br \/>\n<a href=\"https:\/\/github.com\/casparwylie\/cascii-core\">GitHub<\/a><br \/>\net pour les raccourcis clavier, c\u2019est du classique : Ctrl+Z pour annuler, Ctrl+C\/V pour copier-coller, Ctrl+G pour grouper des \u00e9l\u00e9ments, Shift+Click pour la multi-s\u00e9lection. L\u2019historique est illimit\u00e9 donc vous pouvez revenir en arri\u00e8re autant que vous voulez.<\/p>\n<p>Voil\u00e0, si vous documentez du code, dessinez des architectures syst\u00e8me ou avez juste besoin de faire un petit sch\u00e9ma rapide sans sortir l\u2019artillerie lourde,<br \/>\n<a href=\"https:\/\/cascii.app\/\">Cascii<\/a><br \/>\nfera le job !<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Dessiner des sch\u00e9mas en ASCII art, c\u2019est un peu le sport national des devs qui documentent leur code dans des fichiers texte. Sauf que jusqu\u2019ici, soit on se tapait \u00e7a \u00e0 la main caract\u00e8re par caract\u00e8re, soit on passait par des outils en ligne qui demandent de se cr\u00e9er un compte et gardent vos diagrammes sur leurs serveurs. Heureusement, Cascii r\u00e8gle le probl\u00e8me puisqu\u2019il s\u2019agit d\u2019un \u00e9diteur graphique complet qui tient dans un seul fichier HTML ! Et comme Cascii est \u00e9crit en JavaScript pur, y\u2019a aucune d\u00e9pendance, aucun framework, aucun npm install\u2026etc. Vous t\u00e9l\u00e9chargez juste le fichier HTML, vous l\u2019ouvrez dans votre navigateur, et c\u2019est parti mon kiki. Et pour l\u2019installer, une commande suffit : curl https:\/\/cascii.app -o cascii.html &amp;&amp; open cascii.html Ahaha ouais c\u2019est la commande curl la plus nulle de l\u2019histoire des commandes curl mais \u00e7a vous montre que je n\u2019abuse pas. C\u00f4t\u00e9 fonctionnalit\u00e9s, on a donc tout ce qu\u2019il faut pour dessiner des diagrammes propres. Des lignes libres, des lignes en escalier, des carr\u00e9s, des cercles, des losanges, du texte, des tableaux. Un syst\u00e8me de calques permet d\u2019organiser les \u00e9l\u00e9ments et de les grouper. Le plus malin, je trouve, c\u2019est les \u201cjointures intelligentes\u201d qui connectent automatiquement les formes entre elles\u2026 parce que dessiner des fl\u00e8ches qui arrivent pile au bon endroit \u00e0 la main, c\u2019est l\u2019enfer. M\u00eame comme \u00e7a, je suis pas dou\u00e9, cela dit\u2026 Ne le jugez pas\u2026 L\u2019\u00e9diteur propose plusieurs charsets tels que ASCII classique ou Unicode pour ceux qui veulent des lignes plus jolies et il y a 3 styles de lignes (pointill\u00e9es, solides fines, solides \u00e9paisses) ainsi que des fl\u00e8ches directionnelles. C\u00f4t\u00e9 th\u00e8mes, du sombre, du clair, ou un mode \u201cconsole\u201d pour les nostalgiques du terminal. La sauvegarde se fait automatiquement dans le stockage local du navigateur, donc m\u00eame si vous fermez l\u2019onglet par erreur, votre travail n\u2019est pas perdu et pour partager ou archiver, il y a un export en Base64 qui permet de tout r\u00e9cup\u00e9rer plus tard. Si vous utilisez la version h\u00e9berg\u00e9e sur cascii.app, vous pouvez aussi g\u00e9n\u00e9rer des liens courts pour partager vos cr\u00e9ations. Le projet est sous licence Apache 2.0 et le code source est dispo sur GitHub et pour les raccourcis clavier, c\u2019est du classique : Ctrl+Z pour annuler, Ctrl+C\/V pour copier-coller, Ctrl+G pour grouper des \u00e9l\u00e9ments, Shift+Click pour la multi-s\u00e9lection. L\u2019historique est illimit\u00e9 donc vous pouvez revenir en arri\u00e8re autant que vous voulez. Voil\u00e0, si vous documentez du code, dessinez des architectures syst\u00e8me ou avez juste besoin de faire un petit sch\u00e9ma rapide sans sortir l\u2019artillerie lourde, Cascii fera le job !<\/p>\n","protected":false},"author":1,"featured_media":1742,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"give_campaign_id":0,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_kadence_starter_templates_imported_post":false,"footnotes":""},"class_list":["post-1741","page","type-page","status-publish","has-post-thumbnail","hentry"],"campaignId":"","_links":{"self":[{"href":"https:\/\/elearningsamba.com\/index.php\/wp-json\/wp\/v2\/pages\/1741","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elearningsamba.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/elearningsamba.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/elearningsamba.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/elearningsamba.com\/index.php\/wp-json\/wp\/v2\/comments?post=1741"}],"version-history":[{"count":0,"href":"https:\/\/elearningsamba.com\/index.php\/wp-json\/wp\/v2\/pages\/1741\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elearningsamba.com\/index.php\/wp-json\/wp\/v2\/media\/1742"}],"wp:attachment":[{"href":"https:\/\/elearningsamba.com\/index.php\/wp-json\/wp\/v2\/media?parent=1741"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}