diff --git a/bower.json b/bower.json
index 31d69b804..d372b75cd 100644
--- a/bower.json
+++ b/bower.json
@@ -38,7 +38,8 @@
     "vue": "2.4.2",
     "html2canvas": "0.4.1",
     "jspdf": "1.3.2",
-    "animate.css": "3.5.2"
+    "animate.css": "3.5.2",
+    "mermaid": "8.9.0"
   },
   "devDependencies": {},
   "resolutions": {
diff --git a/gulpfile.js b/gulpfile.js
index f3694bf4f..6d2187a49 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -38,7 +38,7 @@ gulp.task('min', function() {
 
 gulp.task('copy', ['copy:bootswatch', 'copy:bootswatch2', 'copy:highlightjs', 'copy:font-awesome', 'copy:flag-icon-css', 
     'copy:html5shiv', 'copy:respond', 'copy:MathJax', 'copy:emoji-parser', 'copy:free-file-icons',
-    'copy:diff2html', 'copy:jsdiff', 'copy:jspdf', 'copy:pdfthema']);
+                   'copy:diff2html', 'copy:jsdiff', 'copy:jspdf', 'copy:pdfthema', 'copy:mermaid']);
 
 gulp.task('copy:bootswatch', function() {
     return gulp.src([
@@ -125,6 +125,12 @@ gulp.task('copy:pdfthema', function() {
     ])
     .pipe(gulp.dest('target/knowledge/css/presentation-thema'));
 });
+gulp.task('copy:mermaid', function() {
+    return gulp.src([
+        'src/main/webapp/bower/mermaid/**/*'
+    ])
+    .pipe(gulp.dest('target/knowledge/bower/mermaid'));
+});
 
 gulp.task('check', function () {
     return gulp.src(['src/main/webapp/js/slide.js'])
diff --git a/package.json b/package.json
index d853cd640..b0bd0f95d 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,7 @@
     "gulp-eslint": "4.0.0",
     "emoji-parser": "0.1.1",
     "emoji-images": "0.1.1",
-    "fs-extra": "*"
+    "fs-extra": "8.1.0"
   },
   "devDependencies": {},
   "scripts": {
diff --git a/pom.xml b/pom.xml
index 230906d1b..9b6093377 100644
--- a/pom.xml
+++ b/pom.xml
@@ -375,7 +375,6 @@
                             <arguments>run emoji</arguments>
                         </configuration>
                     </execution>
-                    <!--
                     <execution>
                         <id>gulp</id>
                         <phase>prepare-package</phase>
@@ -386,7 +385,6 @@
                             <arguments>default</arguments>
                         </configuration>
                     </execution>
-                    -->
                 </executions>
             </plugin>
 
@@ -542,4 +540,4 @@
         </plugins>
     </reporting>
 
-</project>
\ No newline at end of file
+</project>
diff --git a/src/main/java/org/support/project/knowledge/logic/MarkdownLogic.java b/src/main/java/org/support/project/knowledge/logic/MarkdownLogic.java
index 506c663b2..e6158d0bd 100644
--- a/src/main/java/org/support/project/knowledge/logic/MarkdownLogic.java
+++ b/src/main/java/org/support/project/knowledge/logic/MarkdownLogic.java
@@ -1,6 +1,7 @@
 package org.support.project.knowledge.logic;
 
 import io.github.gitbucket.markedj.Marked;
+import io.github.gitbucket.markedj.Renderer;
 import io.github.gitbucket.markedj.Options;
 
 import java.io.IOException;
@@ -116,7 +117,23 @@ private void markdownToHtmlOnMarkedJ(String markdown, MarkDown result) {
         options.setHeaderPrefix("markdown-agenda-");
         options.setHeaderIdSequential(true);
 
-        String html = Marked.marked(markdown, options);
+        Renderer renderer =
+            new Renderer(options) {
+                @Override
+                public String code(String code, String lang, boolean escaped){
+                    if(lang != null && lang.equals("mermaid")) {
+                        StringBuilder sb = new StringBuilder();
+                        sb.append("<div class=\"mermaid\">");
+                        sb.append(code);
+                        sb.append("</div>");
+                        return sb.toString();
+                    } else {
+                        return super.code(code, lang, escaped);
+                    }
+                };
+            };
+
+        String html = Marked.marked(markdown, options, renderer);
         result.setHtml(html);
         result.setParsed(true);
         result.setMarkdown(markdown);
diff --git a/src/main/resources/org/support/project/knowledge/logic/marked.js b/src/main/resources/org/support/project/knowledge/logic/marked.js
index e2f08c998..0e905eee0 100644
--- a/src/main/resources/org/support/project/knowledge/logic/marked.js
+++ b/src/main/resources/org/support/project/knowledge/logic/marked.js
@@ -769,12 +769,18 @@ Renderer.prototype.code = function(code, lang, escaped) {
       + '\n</code></pre>';
   }
 
+  if (lang === "mermaid") {
+    return '<div class="mermaid>"'
+      + code
+      + '\n</div>';
+  }
+
   return '<pre><code class="'
     + this.options.langPrefix
     + escape(lang, true)
     + '">'
     + (escaped ? code : escape(code, true))
-    + '\n</code></pre>\n';
+    + '\n</code></pre>\n' + escape(lang, true);
 };
 
 Renderer.prototype.blockquote = function(quote) {
diff --git a/src/main/webapp/WEB-INF/views/open/knowledge/partials/partials-view-scripts.jsp b/src/main/webapp/WEB-INF/views/open/knowledge/partials/partials-view-scripts.jsp
index 3011d94e1..217920c35 100644
--- a/src/main/webapp/WEB-INF/views/open/knowledge/partials/partials-view-scripts.jsp
+++ b/src/main/webapp/WEB-INF/views/open/knowledge/partials/partials-view-scripts.jsp
@@ -17,6 +17,8 @@ MathJax.Hub.Config({
 <script type="text/javascript" src="<%= request.getContextPath() %>/bower/MathJax/MathJax.js?config=TeX-AMS-MML_HTMLorMML,Safe"></script>
 <script type="text/javascript" src="<%= request.getContextPath() %>/bower/emoji-parser/main.min.js"></script>
 <script type="text/javascript" src="<%= request.getContextPath() %>/bower/jspdf/dist/jspdf.min.js"></script>
+<script type="text/javascript" src="<%= request.getContextPath() %>/bower/mermaid/dist/mermaid.min.js"></script>
+<script>mermaid.initialize({startOnLoad:true});</script>
 
 <!-- build:js(src/main/webapp) js/page-knowledge-view.js -->
 <script type="text/javascript" src="<%= request.getContextPath() %>/bower/bootstrap-tagsinput/dist/bootstrap-tagsinput.min.js"></script>
diff --git a/src/main/webapp/WEB-INF/views/open/license/index.jsp b/src/main/webapp/WEB-INF/views/open/license/index.jsp
index 31bac7032..7bc133304 100644
--- a/src/main/webapp/WEB-INF/views/open/license/index.jsp
+++ b/src/main/webapp/WEB-INF/views/open/license/index.jsp
@@ -35,7 +35,16 @@ $(document).ready(function(){
         type: 'GET',
         timeout: 10000,
     }).done(function(result, textStatus, xhr) {
-        $('#content').html(marked(result));
+      var renderer = new marked.Renderer();
+      renderer.code = function (code, language) {
+        if(language.match(/^mermaid/)){
+           return '<div class="mermaid">'+code+'</div>';
+        }else{
+           return '<pre><code>' + hljs.highlightAuto(code).value + '</code></pre>';
+        }
+      };
+
+      $('#content').html(marked(result, { renderer: renderer }));
     }).fail(function(xhr, textStatus, error) {
         handleErrorResponse(xhr, textStatus, error);
     });
diff --git a/src/main/webapp/WEB-INF/views/protect/knowledge/partials/partials-edit-scripts.jsp b/src/main/webapp/WEB-INF/views/protect/knowledge/partials/partials-edit-scripts.jsp
index f9901231c..1e04c48de 100644
--- a/src/main/webapp/WEB-INF/views/protect/knowledge/partials/partials-edit-scripts.jsp
+++ b/src/main/webapp/WEB-INF/views/protect/knowledge/partials/partials-edit-scripts.jsp
@@ -17,6 +17,8 @@ MathJax.Hub.Config({
 <script type="text/javascript" src="<%= request.getContextPath() %>/bower/MathJax/MathJax.js?config=TeX-AMS-MML_HTMLorMML,Safe"></script>
 <script type="text/javascript" src="<%= request.getContextPath() %>/bower/emoji-parser/main.min.js"></script>
 <script type="text/javascript" src="<%= request.getContextPath() %>/bower/jspdf/dist/jspdf.min.js"></script>
+<script type="text/javascript" src="<%= request.getContextPath() %>/bower/mermaid/dist/mermaid.min.js"></script>
+<script>mermaid.initialize({startOnLoad:true});</script>
 
 <!-- build:js(src/main/webapp) js/page-knowledge-edit.js -->
 <script type="text/javascript" src="<%= request.getContextPath() %>/bower/bootstrap-tagsinput/dist/bootstrap-tagsinput.min.js"></script>
diff --git a/src/main/webapp/js/comment.js b/src/main/webapp/js/comment.js
index a34970b7e..ec352b148 100644
--- a/src/main/webapp/js/comment.js
+++ b/src/main/webapp/js/comment.js
@@ -21,6 +21,8 @@ $(document).ready(function() {
             '#markdownSamplePreview'
         ).then(function() {
             return processMathJax('#sampleMarkdownText');
+        }).then(function() {
+            return processMermaid();
         });
     });
     
@@ -66,6 +68,8 @@ var preview = function() {
         jqObj.html(html);
         processDecoration(target).then(function() {
             return processMathJax(target);
+        }).then(function() {
+            return processMermaid();
         });
     });
 };
diff --git a/src/main/webapp/js/knowledge-common.js b/src/main/webapp/js/knowledge-common.js
index d15c1470d..e7754966d 100644
--- a/src/main/webapp/js/knowledge-common.js
+++ b/src/main/webapp/js/knowledge-common.js
@@ -57,6 +57,12 @@ var processMathJax = function(target) {
     });
 };
 
+var processMermaid = function(target) {
+    return new Promise(function(resolve, reject) {
+      mermaid.init();
+      return resolve();
+    });
+};
 
 /**
  * 内部の別の記事へのリンクを生成
diff --git a/src/main/webapp/js/knowledge-emoji-select.js b/src/main/webapp/js/knowledge-emoji-select.js
index a0754bf06..46f9e866e 100644
--- a/src/main/webapp/js/knowledge-emoji-select.js
+++ b/src/main/webapp/js/knowledge-emoji-select.js
@@ -21,6 +21,8 @@ $(document).ready(function() {
             '#markdownSamplePreview'
         ).then(function() {
             return processMathJax('#sampleMarkdownText');
+        }).then(function() {
+            return processMermaid();
         });
     });
 });
diff --git a/src/main/webapp/js/knowledge-preview.js b/src/main/webapp/js/knowledge-preview.js
index a5e1f71d8..c5bc03c1c 100644
--- a/src/main/webapp/js/knowledge-preview.js
+++ b/src/main/webapp/js/knowledge-preview.js
@@ -9,6 +9,11 @@ var preview = function() {
         '#preview'
     ).then(function() {
         return processMathJax('#preview');
+    }).then(function() {
+      return new Promise(function(resolve, reject) {
+        mermaid.init();
+        return resolve();
+      });
     }).then(function() {
         if ($('input[name=typeId]:checked').val() === '-102') {
             // プレゼンテーションのタイプであった場合に、プレゼンテーションを生成する
diff --git a/src/main/webapp/js/knowledge-view-preview.js b/src/main/webapp/js/knowledge-view-preview.js
index 5fee79b42..77c865cc9 100644
--- a/src/main/webapp/js/knowledge-view-preview.js
+++ b/src/main/webapp/js/knowledge-view-preview.js
@@ -30,6 +30,8 @@ var preview = function() {
         jqObj.html(html);
         processDecoration(target).then(function() {
             return processMathJax(target);
+        }).then(function() {
+            return processMermaid();
         });
     });
 };
@@ -59,6 +61,8 @@ var previewans = function() {
         jqObj.html(html);
         processDecoration(target).then(function() {
             return processMathJax(target);
+        }).then(function() {
+            return processMermaid();
         });
     });
 };
diff --git a/src/main/webapp/js/mynotice.js b/src/main/webapp/js/mynotice.js
index d66b7dcb2..a7f3bbcf9 100644
--- a/src/main/webapp/js/mynotice.js
+++ b/src/main/webapp/js/mynotice.js
@@ -8,6 +8,8 @@ $(document).ready(function() {
     var showNotice = function(notice) {
         parseMarkdown(notice.title, notice.message, '#notice_content_area', '#notice_title_area').then(function() {
             return processMathJax('#notice_content_area');
+        }).then(function() {
+            return processMermaid();
         });
         if (notice.showNextTime) {
             $('#showagain').prop('checked', true);
@@ -93,4 +95,4 @@ $(document).ready(function() {
     });
     
     loadList();
-});
\ No newline at end of file
+});
diff --git a/src/main/webapp/js/notice-list.js b/src/main/webapp/js/notice-list.js
index 85a4df100..9a99d578f 100644
--- a/src/main/webapp/js/notice-list.js
+++ b/src/main/webapp/js/notice-list.js
@@ -6,6 +6,8 @@ var showNotice = function(idx) {
     shown = idx;
     parseMarkdown(notice.title, notice.message, '#notice_content_area', '#notice_title_area').then(function() {
         return processMathJax('#notice_content_area');
+    }).then(function() {
+        return processMermaid();
     });
     if (notice.showNextTime) {
         $('#showagain').prop('checked', true);