diff --git a/browser/components/MarkdownPreview.js b/browser/components/MarkdownPreview.js
index 493b1fc4..5ddc7598 100755
--- a/browser/components/MarkdownPreview.js
+++ b/browser/components/MarkdownPreview.js
@@ -17,6 +17,7 @@ import copy from 'copy-to-clipboard'
 import mdurl from 'mdurl'
 import exportNote from 'browser/main/lib/dataApi/exportNote'
 import { escapeHtmlCharacters } from 'browser/lib/utils'
+import yaml from 'js-yaml'
 
 const { remote } = require('electron')
 const attachmentManagement = require('../main/lib/dataApi/attachmentManagement')
@@ -736,7 +737,8 @@ export default class MarkdownPreview extends React.Component {
       this.refs.root.contentWindow.document.querySelectorAll('.chart'),
       el => {
         try {
-          const chartConfig = JSON.parse(el.innerHTML)
+          const format = el.attributes.getNamedItem('data-format').value
+          const chartConfig = format === 'yaml' ? yaml.load(el.innerHTML) : JSON.parse(el.innerHTML)
           el.innerHTML = ''
 
           const canvas = document.createElement('canvas')
diff --git a/browser/lib/markdown.js b/browser/lib/markdown.js
index 40c47aac..87cf86aa 100644
--- a/browser/lib/markdown.js
+++ b/browser/lib/markdown.js
@@ -126,9 +126,13 @@ class Markdown {
 
     this.md.use(require('./markdown-it-fence'), {
       chart: token => {
+        if (token.parameters.hasOwnProperty('yaml')) {
+          token.parameters.format = 'yaml'
+        }
+
         return `<pre class="fence">
           <span class="filename">${token.fileName}</span>
-          <div class="chart" data-height="${token.parameters.height}">${token.content}</div>
+          <div class="chart" data-height="${token.parameters.height}" data-format="${token.parameters.format || 'json'}">${token.content}</div>
         </pre>`
       },
       flowchart: token => {
diff --git a/package.json b/package.json
index c9e22164..c6267cd7 100644
--- a/package.json
+++ b/package.json
@@ -67,6 +67,7 @@
     "iconv-lite": "^0.4.19",
     "immutable": "^3.8.1",
     "js-sequence-diagrams": "^1000000.0.6",
+    "js-yaml": "^3.12.0",
     "katex": "^0.9.0",
     "lodash": "^4.11.1",
     "lodash-move": "^1.1.1",
diff --git a/yarn.lock b/yarn.lock
index 4ecfa51b..c155c8d4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5254,6 +5254,13 @@ js-yaml@^3.10.0, js-yaml@^3.5.1, js-yaml@^3.7.0:
     argparse "^1.0.7"
     esprima "^4.0.0"
 
+js-yaml@^3.12.0:
+  version "3.12.0"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.12.0.tgz#eaed656ec8344f10f527c6bfa1b6e2244de167d1"
+  dependencies:
+    argparse "^1.0.7"
+    esprima "^4.0.0"
+
 js-yaml@~2.0.5:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-2.0.5.tgz#a25ae6509999e97df278c6719da11bd0687743a8"