Redmine 에서 Mermaid 이용하는 방법 » 이력 » 버전 3
버전 2 (Jinwuk Admin, 2018/07/23 13:45) → 버전 3/5 (Jinwuk Admin, 2018/07/23 14:49)
h1. Redmine 에서 Mermaid 이용하는 방법
**주의 : 반드시 Redmine Server를 끄고 다음 내용들을 업데이트 한다.**
"이 사이트를 참조한다":https://serol.ro/posts/2016/redmine_mermaid_js/
redmine에서 간단히 Mermaid를 사용하는 방법을 알아본다. 결론은 mermaid.js를 참조할 수 있게 하면 되는 것이다.
h2. mermaid.js와 css를 redmine 안에 집어 넣기
<pre><code class="ruby">
The first step is to include mermaid javascript and css files, I just added those three lines to @/usr/share/redmine/app/views/layouts/base.html.erb@ file somewhere between @<head> </head>@ tags
</code></pre>
그런데 Windows의 Bitnami redmine stack에서는 Apache 서버 밑에 해당 폴더가 존재한다.
Linux의 경우는 Default로 Apcache 서버가 설치되어 있어 이러한 구조를 가지지 않는다.
(Linux의 Apache서버에서 해당 Directory를 연결/등록만 시켜주면 된다)
<pre>
/C/Bitnami/redmine-2.6.5-0/apps/redmine/htdocs/app/views/layouts
</pre>
여기서 <head> </head> tags 사이에 다음코드를 삽입한다.
<pre><code class="ruby">
<link rel="stylesheet" href="http://knsv.github.io/mermaid/css/mermaid.css">
<script type="text/javascript" src="https://cdn.rawgit.com/knsv/mermaid/0.5.8/dist/mermaid.js"></script>
<script>mermaid.initialize({startOnLoad:true});</script>
</code></pre>
h2. 예제: Wiki Editor에 적용하기
@/usr/share/redmine/lib/redmine/wiki_formatting/macros.rb@ 에 다음의 Macro를 삽입하여 Wiki editor에서 사용하도록 한다,
<pre><code class="ruby">
desc "Add mermaid graphs to your wiki. Example:\n\n {{mermaid\ngraph TD;\n A-->B;\nA-->C;\nB-->D;\nC-->D;\n}}"
macro :mermaid do |obj, args, text|
out = ''.html_safe
out << content_tag('div', text, :class => 'mermaid')
out
end
</code></pre>
h2. 예제 : 테스트
다음을 테스트 해보자.
<pre><code class="ruby">
{{mermaid
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
}}
</code></pre>
{{mermaid
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
}}
**주의 : 반드시 Redmine Server를 끄고 다음 내용들을 업데이트 한다.**
"이 사이트를 참조한다":https://serol.ro/posts/2016/redmine_mermaid_js/
redmine에서 간단히 Mermaid를 사용하는 방법을 알아본다. 결론은 mermaid.js를 참조할 수 있게 하면 되는 것이다.
h2. mermaid.js와 css를 redmine 안에 집어 넣기
<pre><code class="ruby">
The first step is to include mermaid javascript and css files, I just added those three lines to @/usr/share/redmine/app/views/layouts/base.html.erb@ file somewhere between @<head> </head>@ tags
</code></pre>
그런데 Windows의 Bitnami redmine stack에서는 Apache 서버 밑에 해당 폴더가 존재한다.
Linux의 경우는 Default로 Apcache 서버가 설치되어 있어 이러한 구조를 가지지 않는다.
(Linux의 Apache서버에서 해당 Directory를 연결/등록만 시켜주면 된다)
<pre>
/C/Bitnami/redmine-2.6.5-0/apps/redmine/htdocs/app/views/layouts
</pre>
여기서 <head> </head> tags 사이에 다음코드를 삽입한다.
<pre><code class="ruby">
<link rel="stylesheet" href="http://knsv.github.io/mermaid/css/mermaid.css">
<script type="text/javascript" src="https://cdn.rawgit.com/knsv/mermaid/0.5.8/dist/mermaid.js"></script>
<script>mermaid.initialize({startOnLoad:true});</script>
</code></pre>
h2. 예제: Wiki Editor에 적용하기
@/usr/share/redmine/lib/redmine/wiki_formatting/macros.rb@ 에 다음의 Macro를 삽입하여 Wiki editor에서 사용하도록 한다,
<pre><code class="ruby">
desc "Add mermaid graphs to your wiki. Example:\n\n {{mermaid\ngraph TD;\n A-->B;\nA-->C;\nB-->D;\nC-->D;\n}}"
macro :mermaid do |obj, args, text|
out = ''.html_safe
out << content_tag('div', text, :class => 'mermaid')
out
end
</code></pre>
h2. 예제 : 테스트
다음을 테스트 해보자.
<pre><code class="ruby">
{{mermaid
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
}}
</code></pre>
{{mermaid
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
}}
