Membuat gambar rajah duyung di markdown

Rajah rajah duyung dan carta aliran telah mendapat daya tarikan, terutamanya dengan pengumuman GitHub bahawa mereka disokong secara asli di Markdown. Mari kita lihat apa yang mereka ada, bagaimana menggunakannya, dan sama pentingnya: mengapa .

Sama seperti anda mungkin ingin membenamkan demo codepen anda secara langsung dalam sumber dokumentasi anda, mempunyai gambar rajah dan carta anda bersebelahan dengan teks anda membantu menghalang mereka daripada membusuk - iaitu, hanyut dari selaras dengan keadaan dokumen anda. Sama seperti komen yang tidak membantu, usang, atau sebaliknya mengelirukan dalam kod anda boleh menjadi objektif lebih buruk daripada tiada komen, perkara yang sama berlaku untuk gambar rajah.

Rajah duyung berpasangan dengan baik dengan jemak dan penjana tapak statik, yang terus berkembang popular. Pasangan itu semulajadi. Walaupun gambar rajah duyung tidak eksklusif markdown, mereka terinspirasi markdown. Menggunakan markdown abstractions markup yang sama menyediakan kod notat, duyung boleh diwakili sama dengan gambarajah output dan carta aliran. Dan Markdown adalah untuk jemak dan tapak statik sebagai mentega kacang adalah untuk jeli.

Jika laman web anda ditulis dalam markdown, diproses ke HTML, dan anda mempunyai kawalan yang cukup untuk menambah sedikit JavaScript tersuai, maka anda boleh menggunakan idea -idea yang kami tutupi dalam artikel ini agar sesuai dengan keperluan anda sendiri dan melaksanakan gambar rajah dengan duyung dengan mudah di samping markdown anda. Adakah "rajah-as-kod" istilah lagi? Ia sepatutnya.

Sebagai contoh, katakan bahawa anda sedang mengusahakan produk baru yang mewah dan anda ingin memberikan peta jalan dalam bentuk carta Gantt (atau beberapa jenis lain - katakan carta aliran, urutan, dan rajah kelas). Dengan Mermaid, anda boleh melakukan ini dalam beberapa baris kecil:

 Gantt
  Tajuk Pelan Pelan Produk Saya
  dateformat yyyy-mm-dd
  Ciri -ciri sejuk bahagian
  Tugas: A1, 2022-02-25, 30D
  Tugas lain: selepas A1, 20D
  Ciri Rad Bahagian
  Tugas dalam urutan: 2022-03-04, 12D
  Tugas, No. 2: 24d

Yang akan menjadikan rajah SVG yang bagus seperti itu:

Petua Pro: Mermaid mempunyai editor langsung yang membolehkan anda mencubanya tanpa komitmen di Mermaid.Live.

Rajah Mermaid di Markdown

Mermaid berjalan lancar dengan Markdown kerana ia membentangkan dirinya sebagai satu lagi blok kod berpagar, hanya menggunakan set sintaks Bahasa Mermaid. Sebagai contoh, blok kod ini:

 `` `Mermaid
Graf TD;
    A-> B;
    A-> c;
    B-> D;
    C-> d;
`` `

... Menghasilkan elemen HTML dengan kandungan blok kod di dalam:

 <pre class="brush:php;toolbar:false"> <code> Graph TD;
    A-> B;
    A-> c;
    B-> D;
    C-> d; </code> 

Jika anda menggunakan pemproses markdown yang sejajar dengan spec commonmark, ia akan lebih menyerupai ini:

 <pre class="brush:php;toolbar:false"> <code> Graph TD;
    A-> B;
    A-> c;
    B-> D;
    C-> d;
</code> 

Lihat demo

Tingkah laku lalai API Mermaid mengharapkan tag

yang secara langsung mengandungi kandungan-jadi, tidak atau <span> (seperti dari penyerlah sintaks) yang mungkin anda lihat dalam penukaran dari Markdown-to-HTML.<h3> Finessing dengan JavaScript</h3> <p> Dengan sedikit JavaScript, adalah munasabah untuk mengambil HTML yang dihasilkan oleh Markdown dan menstabilkannya ke dalam tag </p> <div> yang sasaran duyung. Perlu diingat bahawa $ elemen.TextContent adalah tujuan di sini: Markdown akan html-encode spesifik aksara (seperti> ke & gt;) yang digunakan duyung. Ia juga menapis sebarang elemen HTML yang salah yang merupakan keturunan elemen <ce>.<div class="code" style="position:relative; padding:0px; margin:0px;"><pre rel="JavaScript" data-line=""> // pilih &lt;pre class=&quot;brush:php;toolbar:false&quot;&gt; _and_ &lt;ce&gt; &lt;ode&gt; document.QuerySelectorAll (&quot;pre.mermaid, pre&gt; code.language-dermaid&quot;). foreach ($ el =&gt; { // Jika pemilih kedua mendapat hit, rujuk ibu bapa &lt;pre class=&quot;brush:php;toolbar:false&quot;&gt; jika ($ el.tagname === &quot;kod&quot;) $ el = $ el.parentElement // Letakkan kandungan duyung dalam jangkaan &lt;div&gt; // Plus menyimpan kandungan asal dalam &lt;pandasan&gt; yang bagus $ el.outerhtml = ` &lt;div&gt; $ {$ el.textcontent} &lt;/div&gt; &lt;utiran&gt; &lt;summary&gt; Sumber Diagram &lt;/summary&gt; &lt;pre class=&quot;brush:php;toolbar:false&quot;&gt; $ {$ el.textcontent} </pre><div class="contentsignin">Salin selepas log masuk</div></div> ` })<p> Sekarang bahawa HTML kami diformat dengan betul, mari kita melaksanakan Mermaid untuk melakukan rendering.</p> <h3> Menggunakan duyung</h3> <p> Mermaid diterbitkan sebagai pakej NPM, jadi anda boleh mengambil salinan dengan menggunakan CDN yang menyedari pakej, seperti UNPKG. Anda akan mahu menggunakan kod minified (misalnya, duy.min.js) dan bukannya eksport lalai mermaid.core.js. Contohnya:</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre rel="HTML" data-line=""> &lt;script src=&quot;https://unpkg.com/%5E%20dilindungi%5D%20/dist/mermaid.min.js&quot;&gt; &lt;/script&gt;</pre><div class="contentsignin">Salin selepas log masuk</div></div> <p> Mermaid <em>juga</em> ESM-siap, jadi anda boleh menggunakan Skypack untuk memuatkannya juga:</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre rel="HTML" data-line=""> &lt;script type=&quot;Module&quot;&gt; Import Mermaid dari &quot;https://cdn.skypack.dev/^ dilindungi]&quot;; &lt;/script&gt;</pre><div class="contentsignin">Salin selepas log masuk</div></div> <p> Anda boleh berhenti di sini jika anda ingin menyimpan perkara yang mudah. Secara lalai, Mermaid akan auto-initialize sendiri apabila dokumen sudah siap. Selagi anda melakukan markdown-to-HTML yang menyempurnakan dengan JavaScript yang disebut sebelum ini- <em>sebelum</em> dimuatkan di Mermaid-anda akan ditetapkan.</p> <p> Walau bagaimanapun, Mermaid mempunyai beberapa tetapan yang bernilai mengkonfigurasi:</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre rel="JavaScript" data-line=""> // Inisialisasi duyung ke [1] kesilapan log, [2] mempunyai keselamatan longgar untuk pihak pertama // Gambar rajah yang ditulis, dan [3] menghormati skema warna gelap yang disukai duys.initialize ({ Loglevel: &quot;Ralat&quot;, // [1] SecurityLevel: &quot;longgar&quot;, // [2] Tema: (window.matchmedia &amp;&amp; window.matchmedia (&quot;(lebih suka-warna-skema: gelap)&quot;). Perlawanan)? &quot;Gelap&quot;: &quot;lalai&quot; // [3] })</pre><div class="contentsignin">Salin selepas log masuk</div></div> <ol> <li> Loglevel akan memberi anda lebih banyak penglihatan ke dalam sebarang kesilapan yang mungkin timbul. Jika anda ingin melihat lebih banyak maklumat, anda boleh memilih tahap yang lebih verbose (atau sebaliknya).</li> <li> SecurityLevel berkaitan dengan tahap kepercayaan untuk sumber rajah. Jika kandungannya <em>anda</em> menulis, maka "longgar" baik -baik saja. Jika ia adalah kandungan yang dihasilkan oleh pengguna, ia mungkin lebih baik meninggalkan "ketat" lalai di tempatnya.</li> <li> Tema mengubah gaya gambarajah yang diberikan. Dengan menanyakan skema warna pilihan dan memanfaatkan pengendali ternary, kami boleh menentukan "gelap" yang sesuai.</li> </ol> <h3> Semua bersama sekarang!</h3> <p> Berikut adalah beberapa contoh rajah duyung dalam markdown:</p> <h3> Perairan yang lebih dalam</h3> <p> Strategi ini sangat berkesan kerana ia <em>progresif</em> : jika JavaScript dilumpuhkan maka sumber duyung asal dipaparkan sebagai-is. Tiada busuk.</p> <p> Terdapat juga antara muka baris arahan sepenuhnya untuk Mermaid yang, jika anda menarik dalam meneroka, berpotensi dapat dimanfaatkan untuk memaparkan gambar rajah yang benar-benar diberikan pelayan. Antara duyung CLI dan penjana dalam talian, mungkin juga mungkin untuk menyambungkan apa sahaja proses membina yang anda gunakan untuk menghasilkan gambaran gambarajah dan memaparkannya sebagai <mg> fallback dan bukannya kod sumber.</mg></p> <p> Mudah -mudahan, kita akan melihat lebih banyak integrasi duyung asli seperti ini kerana Mermaid terus berkembang popular. Kegunaan mempunyai carta visual dan gambar rajah di samping dokumentasi tidak dapat dipertikaikan - dari jalan raya produk ke pokok keputusan dan segala -galanya di antara. Itulah jenis maklumat yang sukar untuk didokumentasikan dengan kata -kata sahaja.</p> <p> Carta Mermaid menyelesaikannya, dan dengan cara yang memastikan maklumat dapat diuruskan dan dikekalkan bersama -sama dengan dokumentasi yang lain.</p></utiran></pandasan> </div></pre></ode></ce></pre></pre></ce> </div></span>

Atas ialah kandungan terperinci Membuat gambar rajah duyung di markdown. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!