Les diagrammes de sirène et les organigrammes ont gagné du terrain, en particulier avec l'annonce de Github qu'ils sont soutenus nativement dans le démarrage. Jetons un coup d'œil à ce qu'ils sont, comment les utiliser et tout aussi important: pourquoi .
Tout comme vous voudrez peut-être intégrer votre démonstration de codepen directement dans votre source de documentation, avoir vos diagrammes et graphiques en direct à côté de votre texte aide à les empêcher de pourrir - c'est-à-dire en dérivant de synchronisation avec l'état de votre document. Tout aussi inutile, obsolète ou autrement des commentaires trompeurs dans votre code peut être objectivement pire que aucun commentaire, il en va de même pour les diagrammes.
Les diagrammes de sirène se marient bien avec les générateurs de sites statiques et statiques, qui continuent de gagner en popularité. L'appariement est naturel. Bien que les diagrammes de sirène ne soient pas exclusifs de Markdown, ils sont inspirés de Markdown. En utilisant les mêmes abstractions de balisage que Markdown fournit au code de note, la sirène peut être représentée de la même manière des diagrammes de sortie et des organigrammes. Et Markdown est des sites de jamstack et de statiques comme le beurre d'arachide est à la gelée.
Si votre site est rédigé dans Markdown, transformé en HTML, et que vous avez suffisamment de contrôle pour ajouter un peu de JavaScript personnalisé, vous pouvez utiliser les idées que nous couvrons dans cet article pour répondre à vos propres besoins et mettre en œuvre des diagrammes avec une sirène pratiquement parallèlement au reste de votre Markdown. Les «diagrammes en tant que code» sont-ils encore un terme? Ça devrait être.
Par exemple, disons que vous travaillez sur un nouveau produit sophistiqué et que vous souhaitez fournir une feuille de route sous la forme d'un graphique Gantt (ou d'un autre type - disons des organigrammes, des séquences et des diagrammes de classe). Avec sirène, vous pouvez le faire dans une petite poignée de lignes:
gantt Titre ma feuille de route du produit dateformat yyyy-mm-dd Section Fonction cool Une tâche: A1, 2022-02-25, 30D Une autre tâche: après A1, 20D Fonction RAD de section Tâche dans la séquence: 2022-03-04, 12D Tâche, n ° 2: 24d
Qui rendra un joli diagramme SVG comme tel:
Conseil de pro: Mermaid a un éditeur en direct qui vous permet de l'essayer sans l'engagement sur sirmaid.live.
Mermaid va bien avec Markdown car il se présente comme un autre bloc de code clôturé, uniquement en utilisant l'ensemble de syntaxe du langage sirène. Par exemple, ce bloc de code:
`` `sirène
graphique TD;
A -> b;
A -> c;
B -> d;
C -> d;
`` ' … Produit un élément HTML
<pre class="brush:php;toolbar:false"> <code> Graph TD;
A -> b;
A -> c;
B -> d;
C -> d; </code> Si vous utilisez un processeur Markdown aligné avec la spécification Commonmark, cela ressemblera davantage à ceci:
<pre class="brush:php;toolbar:false"> <code> Graph TD;
A -> b;
A -> c;
B -> d;
C -> d;
</code> Le comportement par défaut de l'API de la sirène s'attend à une balise
ou <span> (comme à partir d'un surligneur de syntaxe) que vous pourriez voir dans la conversion de Markdown-to-HTML.<h3> Finesse avec javascript</h3>
<p> Avec un peu de JavaScript, il est raisonnable de prendre le HTML généré par Markdown et de le finesse dans la balise <v> que la sirène cible. Il convient de noter que $ element.TextContent est ciblé ici: Markdown sera des caractères spécifiques à Encode HTML (comme> dans & gt;) que Sirène utilise. Il filtre également tous les éléments HTML erronés qui sont des descendants de l'élément <pr>.</pr></v></p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre rel="JavaScript" data-line=""> // Sélectionnez <pre class="brush:php;toolbar:false"> _and_ <pre class="brush:php;toolbar:false"> <code>
document.QuerySelectorall ("pre.mermaid, pre> code.Language-Mermaid"). ForEach ($ el => {
// Si le deuxième sélecteur a obtenu un coup, référencez le parent <pre class="brush:php;toolbar:false">
if ($ el.tagname === "code")
$ el = $ el.parerentelement
// Mettez le contenu de la sirène dans le <v> attendu
// plus gardez le contenu d'origine dans un joli <fetthes>
$ el.outerhtml = `
<div> $ {$ el.textContent} </div>
<dettots>
<summary> Source du diagramme </summary>
<pre class="brush:php;toolbar:false"> $ {$ el.textContent} </pre><div class="contentsignin">Copier après la connexion</div></div>
'
})</dettots></fetthes></v></pre>
<p> Maintenant que notre HTML est correctement formulé, mettons en œuvre une sirène pour faire le rendu.</p>
<h3> Utilisation de sirène</h3>
<p> Mermaid est publié en tant que package NPM, vous pouvez donc en prendre une copie en utilisant un CDN conscient du package, comme UNPKG. Vous voudrez utiliser le code minifié (par exemple, sirmaid.min.js) au lieu de l'exportation par défaut de sirmaid.core.js. Par exemple:</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre rel="HTML" data-line=""> <script src="https://unpkg.com/&email%20prot%C3%A9g%C3%A9%5D%20/dist/mermaid.min.js"> </ script></script></pre><div class="contentsignin">Copier après la connexion</div></div>
<p> La sirène est <em>également</em> prête à l'ESM, vous pouvez donc utiliser Skypack pour le charger également:</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre rel="HTML" data-line=""> <script type="module">
Importer une sirène de "https://cdn.skypack.dev/&email protégé]";
</script></pre><div class="contentsignin">Copier après la connexion</div></div>
<p> Vous pouvez vous arrêter ici si vous voulez garder les choses simples. Par défaut, Mermaid va se produire automatiquement lorsque le document est prêt. Tant que vous faites la finesse de marque-to-html avec JavaScript mentionné plus tôt - <em>avant</em> de charger en sirène - vous serez réglé.</p>
<p> Cependant, Mermaid a quelques paramètres à configurer:</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre rel="JavaScript" data-line=""> // Initialiser les erreurs de journal des sirènes à [1], [2] ont une sécurité lâche pour les premiers
// Diagrammes l'auteur et [3] respectent un jeu de couleurs sombre préféré
sirmaid.Initialize ({
loglevel: "erreur", // [1]
Securitylevel: "lâche", // [2]
Thème: (Window.matchMedia && window.matchMedia ("(préfère-Color-Scheme: Dark)"). Matches)?
"sombre" :
"par défaut" // [3]
})</pre><div class="contentsignin">Copier après la connexion</div></div>
<ol>
<li> Loglevel vous donnera un peu plus de visibilité sur toutes les erreurs qui pourraient survenir. Si vous souhaitez voir plus d'informations, vous pouvez choisir un niveau plus verbeux (ou vice versa).</li>
<li> Securitylevel se rapporte au niveau de confiance de la source du diagramme. Si c'est le contenu que <em>vous</em> créez, alors "lâche" est bien. Si c'est du contenu généré par l'utilisateur, il vaut probablement mieux laisser la valeur par défaut "stricte" en place.</li>
<li> Le thème change le style des diagrammes rendus. En interrogeant la palette de couleurs préférée et en tirant parti d'un opérateur ternaire, nous pouvons spécifier "Dark" le cas échéant.</li>
</ol>
<h3> Tous ensemble maintenant!</h3>
<p> Voici quelques exemples de diagrammes de sirène dans Markdown:</p>
<h3> Eaux plus profondes</h3>
<p> Cette stratégie est particulièrement efficace car elle est <em>progressive</em> : si JavaScript est désactivé, la source de sirène d'origine est affichée tel quel. Pas de faute.</p>
<p> Il y a aussi une interface de ligne de commande à part entière pour la sirène qui, si vous êtes intéressant d'explorer, pourrait potentiellement être exploité pour afficher des diagrammes qui sont complètement rendus en côté. Entre la CLI de sirène et le générateur en ligne, il peut même être possible de s'accrocher au processus de construction que vous utilisez pour générer un instantané d'un diagramme et de l'afficher en tant que Fallback <mg> au lieu du code source.</mg></p>
<p> J'espère que nous verrons plus d'intégations de sirènes indigènes comme celle-ci alors que la sirène continue de gagner en popularité. L'utilité d'avoir des graphiques visuels et des diagrammes à côté de la documentation est incontestable - des feuilles de route des produits aux arbres de décision et tout le reste. C'est le genre d'informations qui est tout simplement difficile à documenter avec les mots seuls.</p>
<p> Les graphiques sirènes résolvent cela, et d'une manière qui garantit que les informations peuvent être gérées et maintenues aux côtés du reste de la documentation.</p>
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
La différence entre Win7 32 bits et 64 bits
Comment annuler le compte Douyin sur Douyin
utilisation du format_numéro
Méthodes de réparation des vulnérabilités du système informatique
Quelle est la différence entre USB-C et TYPE-C
Quels sont les langages de programmation ?
Site officiel d'Okex
Cache mybatis de premier niveau et cache de deuxième niveau
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
