Insérer des images dans Hugo

PNG, JPEG

Sauvegarder l'image dans [racine du projet]/static/img (ces dossiers n'existent pas par défaut)
Dans le markdown : {{< figure src="/decp-docs/img/image.png" title="Mon image" >}}

SVG

Pour insérer des balises HTML ou SVG dans le markdown et qu'elles soient interprétées par Hugo, il faut modifier config.yaml :

markup:
  defaultMarkdownHandler: goldmark
  goldmark:
    renderer:
      unsafe: true

Voir la doc officielle

Ensuite on peut

soit utiliser le shortcode Hugo figure décrit ci-dessus, mais les liens hypertextes dans le SVG seront inactifs
soit copier le SVG directement, mais cela peut être très verbeux, et il faut copier le contenu dans le markdown à chaque modification du dessin

Dessin draw.io

Draw.io permet d'intégrer les dessins de plusieurs manières. En plus de télécharger un fichier image (JPEG, PNG ou SVG), il est possible d'intégrer du code HTML et JavaScript qui interprète le dessin, encodé en base64 :

<div class="mxgraph" style="max-width:100%;border:1px solid transparent;" data-mxgraph="{&quot;highlight&quot;:     &quot;#0000ff&quot;,&quot;nav&quot;:true,&quot;resize&quot;:true,&quot;toolbar&quot;:&quot;zoom layers              lightbox&quot;,&quot;edit&quot;:&quot;_blank&quot;,&quot;xml&quot;:&quot;&lt;mxfile host=\&quot;app.diagrams.       net\&quot; modified=\&quot;2020-09-07T09:01:07.563Z\&quot; agent=\&quot;5.0 (X11)\&quot; etag=\&quot;               _qclodUT4bsLZwi-tAGX\&quot; version=\&quot;13.6.6\&quot; type=\&quot;device\&quot;&gt;&lt;diagram id=\&quot;        YwVPcnQrtgQc1rpSdtJS\&quot; name=\&quot;Page-1\&quot;&gt;7Vpbc5s4GP01nu4+2AMIsHl0HDubTrPp1t1p+iiDbJTIiAoR2/         31K4GwuSi14/rWbNsZB30IAed8d9ECg/nyhsE4vKMBIi3LCJYtcN2yLBP0LPFHSla5xHPMXDBjOFCTNoIx/                                 o6U0FDSFAcoqUzklBKO46rQp1GEfF6RQcboojptSkn1rjGcoYZg7EPSlH7BAQ9zac/qbuR/ITwLizubrpefmcNisnqTJIQBXZREYNgCA0Ypz4/      mywEiErwCl/y60Qtn1w/GUMR3uSBc3N7Nb8E/V49fRu/                                                                        B4vP3h5C0gVrmGZJUvbF6Wr4qIGA0jQIkVzFa4GoRYo7GMfTl2YUgXchCPidiZIrDhDP6tIZKvOTVlEZc8Wq66xkDSijL1gf97L84E8AkzO4jF5piQopJEY3E5VfNNy6eHjGOliWRQuAG0TnibCWmqLM9RYbSRstQ48WG2y5QsrDE65pFqPRptl56A7k4UKhnw38TxO4nj1IrLYPACSIFwC7hCpgK0u63lBYn2kkGWV9MMN14mb19cT5T9wK+jRCYwACjUVnkztTf7IbpnnfLVxlhP8SIJbmxJZQIxRqAVt+                                                TEmmj4lcYYS7LhihJBFNYAJKfRRkO2fXzOYyycZxOCP4mdE89o8AwrT+                                                            3kOVYFWJJBMHRk1JszqUz6EserNFisegEkMPOjKbPnSmTF8sfKUsQFw8ycvzA6U6mbm9i+7bZ9SzPQxMDedkC1jaTKSuYMrF9jUXqLRa+pk/        wLBIyTmOtCTVMpjvsu0NDY1wHMBG7W7MRt2kjwNLYiLmHjYhhyUxe4bhMp+                                                         GnUCA8txpSxkM6oxEkw430qkrOZs4HKoHPKHlEnK8UojDltEpYHW6BMls9yPU6TjH8quZmg+ululk+WhWjJeYPxTxx/                         HWzhBhtLpKD4pqmWrxIdkJT5qMfoKecPIdshvg2XReGHFSCZFN1GCKQ4+dqzNSpgbr0I8WZ71Mq5xhVlQN1TcofVF1VU6b1Y+zjgwP8/            FNO8Rf15QPMfIIGt6/yumtxBtouvtjPbuPjjnD4YjgLxY8JvAli/kqug/                                                           y4zeAc7uB1rcN53WP4zJoCr31oyWeatsZnOid0md2jp3onjVOeVw1TttkMU6apCVOm92rMd4xJxttC2DRqEDsaiK3TQgzOEfY3Yb4c5Esx/         4Uw30gXVNjfhPp1snCSsF+Yw9a4b50m7tfLMdusucP8jRpxv88YXJWmxXJC8or7eE5NE/MVd0wqdlTVZmn9HqXLohCq1UqKO8v4o387GrYscU/      j43Asfu8g88N8Zi6OGRXFcVZRvYN+iDhK2Z8/52gushBZ1xOnKER25NTTePifzgDzVOr9+                                              P7vH1a8JXKTEMbyUKiCL6rs7QRPoP80y1TiPuUiXUPHy4XMmrEBoOmxaFgDxyLN0oXlA5H2cPfhLXBmdS+NM11f8rehVUhzaunZ+UmzfhvaNs68S+   MMHI+z+8H1+C2Q5vacCyPtLM3PQ1VBB21k2q0zVTT/                                                                          j02ffCeFwSggKxpl2ykH2qeprZx3CB9FgdQOUFsWR0jWRaO5rH5QO9sm8tsSfRpTgtryInEaR1Pa2qF7aJfYvrz2IaiVp5pCZ51Vlx1M94TdQ8ttBArYKcy05IcIwXGCtsMIkzjfr5/ipYS+gWt5A1joeQBRb+rralDX76HJ9ECJsGt1qs7e7nYbZABH4+                                          ydYzn7XgP4Saf31oB3ulYd9oKIcwHvNHCv7ivXCBAvylua9m3tIwaoWiy+wAoxTe9ljoOAvMRj1VNtYW6a/TuQi3LtCj+mp/                    FRpsZHHa0XA86TBGlbuOuurbaFu+8u8fZvafZPnMDvxOmoidMN5mE6OVi2NMuWU1mSfgt1l29XwGXnQfVtVOcSt1FBMxHyqWzpnz8eVD+           gO11wsO1qV8Oxm7zpaDtEbPgUPt97UUQDevf5arQcfhpP79rN7uGyYzQY+sVTplrV4GpAP1a+pAX9AN0/W3jThiuN0nm+/cVEqae+               InyHI4Ft6nMsy0Dh4BlDSUyjAAoryrfJnilm8hQWBWUi4mGyayvqlYZL0JSfwWyzeeqhrQNoU7euTdr8W9fm2u+zv82Hz/mG6+bzcTD8Dw==&lt;/   diagram&gt;&lt;/mxfile&gt;&quot;}"></div>
<script type="text/javascript" src="https://app.diagrams.net/js/viewer-static.min.js"></script>

Comme pour l'intégration de balises SVG, c'est assez verbeux et il faut manuellement mettre le mardown à jour, mais on bénéficie alors des contrôles JavaScript de draw.io (zoom, plein écran, etc.)

J'ai réussi à faire fonctionner une iframe avec un fichier HTML exporté depuis draw.io dans /static/static/html (sic) (<iframe src="/decp-docs/html/processus-decp-rama.html"/>). Ce n'est cependant pas très pratique car les dimensions de l'iframe ne s'adaptent pas aux dimensions du contenu.

139bercy / decp-docs

Insérer des images dans Hugo #10

PNG, JPEG

SVG

Dessin draw.io