From 706c57bf2f00e0ffb4fde75b2b211f134ba7a775 Mon Sep 17 00:00:00 2001
From: Ben Walker <benjamin.walker@intel.com>
Date: Tue, 12 Jun 2018 15:18:11 -0700
Subject: [PATCH] doc: Add an example of using two.js to draw a diagram

Change-Id: I50a525ac46ac011af81625fa0f095b1f3d981aba
Signed-off-by: Ben Walker <benjamin.walker@intel.com>
Reviewed-on: https://review.gerrithub.io/414891
Tested-by: SPDK Automated Test System <sys_sgsw@intel.com>
Chandler-Test-Pool: SPDK Automated Test System <sys_sgsw@intel.com>
Reviewed-by: Changpeng Liu <changpeng.liu@intel.com>
---
 doc/blob.md | 52 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 52 insertions(+)

diff --git a/doc/blob.md b/doc/blob.md
index b6596748f..2fa3db81e 100644
--- a/doc/blob.md
+++ b/doc/blob.md
@@ -57,6 +57,58 @@ store metadata in the form of key/value pairs with each blob which we'll refer t
 Blobstore owns the entire underlying device which is made up of a private Blobstore metadata region and the collection of
 blobs as managed by the application.
 
+@htmlonly
+
+  <div id="blob_hierarchy"></div>
+
+  <script>
+    let elem = document.getElementById('blob_hierarchy');
+
+    let canvasWidth = 800;
+    let canvasHeight = 200;
+    var two = new Two({ width: 800, height: 200 }).appendTo(elem);
+
+    var blobRect = two.makeRectangle(canvasWidth / 2, canvasHeight / 2, canvasWidth, canvasWidth);
+    blobRect.fill = '#7ED3F7';
+
+    var blobText = two.makeText('Blob', canvasWidth / 2, 10, { alignment: 'center'});
+
+    for (var i = 0; i < 2; i++) {
+        let clusterWidth = 400;
+        let clusterHeight = canvasHeight;
+        var clusterRect = two.makeRectangle((clusterWidth / 2) + (i * clusterWidth),
+                                            clusterHeight / 2,
+                                            clusterWidth - 10,
+                                            clusterHeight - 50);
+        clusterRect.fill = '#00AEEF';
+
+        var clusterText =  two.makeText('Cluster',
+                                        (clusterWidth / 2) + (i * clusterWidth),
+                                        35,
+                                        { alignment: 'center', fill: 'white' });
+
+
+        for (var j = 0; j < 4; j++) {
+            let pageWidth = 100;
+            let pageHeight = canvasHeight;
+            var pageRect = two.makeRectangle((pageWidth / 2) + (j * pageWidth) + (i * clusterWidth),
+                                             pageHeight / 2,
+                                             pageWidth - 20,
+                                             pageHeight - 100);
+            pageRect.fill = '#003C71';
+
+            var pageText =  two.makeText('Page',
+                                         (pageWidth / 2) + (j * pageWidth) + (i * clusterWidth),
+                                         pageHeight / 2,
+                                         { alignment: 'center', fill: 'white' });
+        }
+    }
+
+    two.update();
+  </script>
+
+@endhtmlonly
+
 ### Atomicity
 
 For all Blobstore operations regarding atomicity, there is a dependency on the underlying device to guarantee atomic