Redmine 에서 Mermaid 이용하는 방법 » 이력 » 버전 4
Jinwuk Admin, 2018/07/23 14:50
1 | 1 | Jinwuk Admin | h1. Redmine 에서 Mermaid 이용하는 방법 |
---|---|---|---|
2 | 1 | Jinwuk Admin | |
3 | 3 | Jinwuk Admin | **주의 : 반드시 Redmine Server를 끄고 다음 내용들을 업데이트 한다.** |
4 | 1 | Jinwuk Admin | "이 사이트를 참조한다":https://serol.ro/posts/2016/redmine_mermaid_js/ |
5 | 1 | Jinwuk Admin | |
6 | 1 | Jinwuk Admin | redmine에서 간단히 Mermaid를 사용하는 방법을 알아본다. 결론은 mermaid.js를 참조할 수 있게 하면 되는 것이다. |
7 | 1 | Jinwuk Admin | |
8 | 1 | Jinwuk Admin | h2. mermaid.js와 css를 redmine 안에 집어 넣기 |
9 | 1 | Jinwuk Admin | |
10 | 3 | Jinwuk Admin | <pre><code class="ruby"> |
11 | 1 | Jinwuk Admin | 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 |
12 | 3 | Jinwuk Admin | </code></pre> |
13 | 1 | Jinwuk Admin | |
14 | 1 | Jinwuk Admin | 그런데 Windows의 Bitnami redmine stack에서는 Apache 서버 밑에 해당 폴더가 존재한다. |
15 | 1 | Jinwuk Admin | Linux의 경우는 Default로 Apcache 서버가 설치되어 있어 이러한 구조를 가지지 않는다. |
16 | 1 | Jinwuk Admin | (Linux의 Apache서버에서 해당 Directory를 연결/등록만 시켜주면 된다) |
17 | 1 | Jinwuk Admin | |
18 | 1 | Jinwuk Admin | <pre> |
19 | 1 | Jinwuk Admin | /C/Bitnami/redmine-2.6.5-0/apps/redmine/htdocs/app/views/layouts |
20 | 1 | Jinwuk Admin | </pre> |
21 | 1 | Jinwuk Admin | |
22 | 1 | Jinwuk Admin | 여기서 <head> </head> tags 사이에 다음코드를 삽입한다. |
23 | 1 | Jinwuk Admin | |
24 | 1 | Jinwuk Admin | <pre><code class="ruby"> |
25 | 1 | Jinwuk Admin | <link rel="stylesheet" href="http://knsv.github.io/mermaid/css/mermaid.css"> |
26 | 1 | Jinwuk Admin | <script type="text/javascript" src="https://cdn.rawgit.com/knsv/mermaid/0.5.8/dist/mermaid.js"></script> |
27 | 1 | Jinwuk Admin | <script>mermaid.initialize({startOnLoad:true});</script> |
28 | 1 | Jinwuk Admin | </code></pre> |
29 | 1 | Jinwuk Admin | |
30 | 2 | Jinwuk Admin | h2. 예제: Wiki Editor에 적용하기 |
31 | 2 | Jinwuk Admin | |
32 | 2 | Jinwuk Admin | @/usr/share/redmine/lib/redmine/wiki_formatting/macros.rb@ 에 다음의 Macro를 삽입하여 Wiki editor에서 사용하도록 한다, |
33 | 2 | Jinwuk Admin | |
34 | 2 | Jinwuk Admin | <pre><code class="ruby"> |
35 | 2 | Jinwuk Admin | desc "Add mermaid graphs to your wiki. Example:\n\n {{mermaid\ngraph TD;\n A-->B;\nA-->C;\nB-->D;\nC-->D;\n}}" |
36 | 2 | Jinwuk Admin | macro :mermaid do |obj, args, text| |
37 | 2 | Jinwuk Admin | out = ''.html_safe |
38 | 2 | Jinwuk Admin | out << content_tag('div', text, :class => 'mermaid') |
39 | 2 | Jinwuk Admin | out |
40 | 2 | Jinwuk Admin | end |
41 | 2 | Jinwuk Admin | </code></pre> |
42 | 3 | Jinwuk Admin | |
43 | 3 | Jinwuk Admin | h2. 예제 : 테스트 |
44 | 3 | Jinwuk Admin | |
45 | 3 | Jinwuk Admin | 다음을 테스트 해보자. |
46 | 3 | Jinwuk Admin | |
47 | 4 | Jinwuk Admin | <pre><code class="html"> |
48 | 3 | Jinwuk Admin | {{mermaid |
49 | 3 | Jinwuk Admin | graph TD; |
50 | 3 | Jinwuk Admin | A-->B; |
51 | 3 | Jinwuk Admin | A-->C; |
52 | 3 | Jinwuk Admin | B-->D; |
53 | 3 | Jinwuk Admin | C-->D; |
54 | 3 | Jinwuk Admin | }} |
55 | 3 | Jinwuk Admin | </code></pre> |
56 | 3 | Jinwuk Admin | |
57 | 3 | Jinwuk Admin | {{mermaid |
58 | 3 | Jinwuk Admin | graph TD; |
59 | 3 | Jinwuk Admin | A-->B; |
60 | 3 | Jinwuk Admin | A-->C; |
61 | 3 | Jinwuk Admin | B-->D; |
62 | 3 | Jinwuk Admin | C-->D; |
63 | 3 | Jinwuk Admin | }} |