From d4b35b5594f3a3d42e2e128862cb97c2e9ab50e0 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knsv@users.noreply.github.com>
Date: Mon, 22 Dec 2014 13:22:45 +0100
Subject: [PATCH] Update README.md

Added an image example of a sequence diagram
---
 README.md | 38 +++++++++++++++++++++++++++++++++-----
 1 file changed, 33 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index ba5ceea80..e6431c498 100644
--- a/README.md
+++ b/README.md
@@ -8,18 +8,46 @@ Ever wanted to simplify documentation and avoid heavy tools like Visio when expl
 This is why mermaid was born, a simple markdown-like script language for generating charts from text via javascript.
 
 The code below would render the following image
-
-```
+<table>
+<tr><td>
+<pre>
 graph TD;
     A-->B;
     A-->C;
     B-->D;
     C-->D;
-```
-
+</pre>
+</td>
+<td>
 would render this lovely chart:
 
-![Example 1](http://www.sveido.com/mermaid/img/ex1.png)
+<img src='http://www.sveido.com/mermaid/img/ex1.png' alt='Example 1'>
+</td>
+</tr>
+<tr>
+<td>
+<pre>
+sequenceDiagram
+    participant Alice
+    participant Bob
+    Alice->John: Hello John, how are you?
+    loop Healthcheck
+        John->John: Fight against hypochondria
+    end
+    Note right of John: Rational thoughts &lt;br/>prevail...
+    John-->Alice: Great!
+    John->Bob: How about you?
+    Bob-->John: Jolly good!
+</pre>
+</td>
+<td>
+would render this lovely chart:
+
+<img src='http://www.sveido.com/mermaid/img/seq1.png' alt='Example 2'>
+</td>
+</tr>
+
+</table>
 
 A page with a live example can be seen [here](http://www.sveido.com/mermaid/demo/html/web.html). You can also look at mermaid in action using [jsbin](http://jsbin.com/faxunexeku/1/edit?html,output). If you want a live demo, there is an editor provided in the mermaid project or you can simply look at this [great editor](http://danielmschmidt.github.io/mermaid-demo/)