Merge pull request #1282 from ipfs/feat/add-mermaid-diagrams

feat: add mermaid diagram support

docs/.vuepress/config.js

@@ -442,6 +442,7 @@ module.exports = {
     ],
     'vuepress-plugin-chunkload-redirect',
     'vuepress-plugin-ipfs',
+    'vuepress-plugin-mermaidjs',
     'tabs'
   ],
   extraWatchFiles: ['.vuepress/nav/en.js']

docs/concepts/ipns.md

@@ -52,6 +52,12 @@ IPNS record can point at an immutable or a mutable path. The meaning behind CID
 
 The following is a useful mental model for understanding the difference between the two:
 
+```mermaid
+graph LR;
+    IPNS-- mutable pointer -->IPFS;
+    IPFS-- immutable pointer -->content;
+```
+
 ```
 IPFS = immutable *Pointer => content
 IPNS = **Pointer => content
@@ -79,6 +85,24 @@ As a user or developer using IPNS for naming, there are three common operations
 
 ### IPNS is transport agnostic
 
+```mermaid
+graph TB
+    Record>"IPNS Record"]
+    subgraph Routing
+      Publisher
+      Resolver
+      Local[("Local store")]
+      subgraph Transports
+        PubSub[(PubSub)]
+        DHT[(DHT)]
+      end
+    end
+    Resolver-- resolve -->Record-- "(re)publish" -->Publisher
+    Publisher-- PUT -->DHT-. GET .->Resolver
+    Publisher-- PUT -->PubSub-. GET .->Resolver
+    Publisher-- Cache -->Local-. GET .->Resolver-- Cache -->Local
+```
+
 The self-certifying nature of IPNS records means that they are not tied to a specific transport protocol. In practice, most IPFS implementations rely on the [**DHT**](dht.md) and [**libp2p PubSub**](https://docs.libp2p.io/concepts/publish-subscribe/) to publish and resolve IPNS records.
 
 There are nuanced differences and trade-offs between the **DHT** and **PubSub** to be aware of.