add documantation

kamiazya · Mar 8, 2019 · c5e7d66 · c5e7d66
1 parent 2a59cc2
commit c5e7d66
Show file tree

Hide file tree

Showing 11 changed files with 104 additions and 40 deletions.
diff --git a/README.md b/README.md
@@ -1,19 +1,18 @@
-[![Build Status](https://travis-ci.org/kamiazya/typedoc-plugin-mermaid.svg?branch=master)](https://travis-ci.org/kamiazya/typedoc-plugin-mermaid) [![CodeFactor](https://www.codefactor.io/repository/github/kamiazya/typedoc-plugin-mermaid/badge)](https://www.codefactor.io/repository/github/kamiazya/typedoc-plugin-mermaid) [![npm version](https://badge.fury.io/js/typedoc-plugin-mermaid.svg)](https://badge.fury.io/js/typedoc-plugin-mermaid) [![Maintainability](https://api.codeclimate.com/v1/badges/827855fa3daba03076b4/maintainability)](https://codeclimate.com/github/kamiazya/typedoc-plugin-mermaid/maintainability) [![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fkamiazya%2Ftypedoc-plugin-mermaid.svg?type=shield)](https://app.fossa.io/projects/git%2Bgithub.com%2Fkamiazya%2Ftypedoc-plugin-mermaid?ref=badge_shield) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) [![typedoc-plugin-mermaid Dev Token](https://badge.devtoken.rocks/typedoc-plugin-mermaid)](https://devtoken.rocks/package/typedoc-plugin-mermaid)
-
+[![Build Status](https://travis-ci.org/kamiazya/typedoc-plugin-mermaid.svg?branch=master)](https://travis-ci.org/kamiazya/typedoc-plugin-mermaid) [![CodeFactor](https://www.codefactor.io/repository/github/kamiazya/typedoc-plugin-mermaid/badge)](https://www.codefactor.io/repository/github/kamiazya/typedoc-plugin-mermaid) [![npm version](https://badge.fury.io/js/typedoc-plugin-mermaid.svg)](https://badge.fury.io/js/typedoc-plugin-mermaid) [![Maintainability](https://api.codeclimate.com/v1/badges/827855fa3daba03076b4/maintainability)](https://codeclimate.com/github/kamiazya/typedoc-plugin-mermaid/maintainability) [![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fkamiazya%2Ftypedoc-plugin-mermaid.svg?type=shield)](https://app.fossa.io/projects/git%2Bgithub.com%2Fkamiazya%2Ftypedoc-plugin-mermaid?ref=badge_shield) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) [![typedoc-plugin-mermaid Dev Token](https://badge.devtoken.rocks/typedoc-plugin-mermaid)](https://devtoken.rocks/package/typedoc-plugin-mermaid) [![BCH compliance](https://bettercodehub.com/edge/badge/kamiazya/typedoc-plugin-mermaid?branch=master)](https://bettercodehub.com/)
 
 # typedoc-plugin-mermaid
 
-A plugin for TypeDoc that generates graphs for mermaid.js diagrams by "mermaid" annotation.
+A plugin for TypeDoc that generates graphs for mermaid.js diagrams by @mermaid annotation.
 
 ## Usage
 
-Write tsdoc with `@mermaid` annotation.
+Write tsdoc with `@mermaid` annotation
 
 ```typescript
 /**
  * Hoge is sample class for example of `typedoc-plugin-mermaid`.
  *
- * @mermaid
+ * @mermaid Make TypeDoc easy to use with mermaid.js
  * graph TB
  *   mermaid.js --> TypeDoc;
  */
@@ -22,9 +21,9 @@ export class Hoge {
 
 ```
 
-↓↓↓
+[↓↓ DEMO ↓↓](https://kamiazya.github.io/typedoc-plugin-mermaid/classes/hoge.html)
 
-[![DEMO](./img/example.png)](https://kamiazya.github.io/typedoc-plugin-mermaid/classes/hoge.html)
+[![Example](./media/example.png)](https://kamiazya.github.io/typedoc-plugin-mermaid/classes/hoge.html)
 
 ## Installation
 

diff --git a/docs/assets/js/search.js b/docs/assets/js/search.js
diff --git a/docs/classes/hoge.html b/docs/classes/hoge.html
@@ -73,7 +73,7 @@ <h1>Class Hoge</h1>
 					</div>
 					<dl class="tsd-comment-tags">
 						<dt>mermaid</dt>
-						<dd><h4 id="-"> </h4>
+						<dd><h4 id="make-typedoc-easy-to-use-with-mermaid-js">Make TypeDoc easy to use with mermaid.js</h4>
 							<div class="mermaid">graph TB
 								mermaid.js --> TypeDoc;
 						</div></dd>
@@ -95,7 +95,8 @@ <h2>Index</h2>
 						<section class="tsd-index-section ">
 							<h3>Methods</h3>
 							<ul class="tsd-index-list">
-								<li class="tsd-kind-method tsd-parent-kind-class"><a href="hoge.html#exampleforgraphlr" class="tsd-kind-icon">example<wbr>For<wbr>GraphLR</a></li>
+								<li class="tsd-kind-method tsd-parent-kind-class"><a href="hoge.html#alicegreetingflow" class="tsd-kind-icon">alice<wbr>Greeting<wbr>Flow</a></li>
+								<li class="tsd-kind-method tsd-parent-kind-class"><a href="hoge.html#multigraphs" class="tsd-kind-icon">multi<wbr>Graphs</a></li>
 							</ul>
 						</section>
 					</div>
@@ -104,26 +105,67 @@ <h3>Methods</h3>
 			<section class="tsd-panel-group tsd-member-group ">
 				<h2>Methods</h2>
 				<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
-					<a name="exampleforgraphlr" class="tsd-anchor"></a>
-					<h3>example<wbr>For<wbr>GraphLR</h3>
+					<a name="alicegreetingflow" class="tsd-anchor"></a>
+					<h3>alice<wbr>Greeting<wbr>Flow</h3>
 					<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
-						<li class="tsd-signature tsd-kind-icon">example<wbr>For<wbr>GraphLR<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
+						<li class="tsd-signature tsd-kind-icon">alice<wbr>Greeting<wbr>Flow<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
 					</ul>
 					<ul class="tsd-descriptions">
 						<li class="tsd-description">
 							<aside class="tsd-sources">
 								<ul>
-									<li>Defined in <a href="https://github.com/kamiazya/typedoc-plugin-mermaid/blob/367db4e/example/Hoge.ts#L18">Hoge.ts:18</a></li>
+									<li>Defined in <a href="https://github.com/kamiazya/typedoc-plugin-mermaid/blob/2a59cc2/example/Hoge.ts#L19">Hoge.ts:19</a></li>
 								</ul>
 							</aside>
 							<div class="tsd-comment tsd-typography">
+								<div class="lead">
+									<p>Alice says &quot;Hello John, how are you?&quot; to Jone,
+									then John says &quot;Great!&quot;.</p>
+								</div>
 								<dl class="tsd-comment-tags">
 									<dt>mermaid</dt>
-									<dd><h4 id="-"> </h4>
+									<dd><h4 id="alice-greet-to-jone">Alice greet to Jone</h4>
+										<div class="mermaid">sequenceDiagram
+											Alice->>John: Hello John, how are you?
+											John-->>Alice: Great!
+									</div></dd>
+								</dl>
+							</div>
+							<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
+						</li>
+					</ul>
+				</section>
+				<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
+					<a name="multigraphs" class="tsd-anchor"></a>
+					<h3><span class="tsd-flag ts-flagAbstract">Abstract</span> multi<wbr>Graphs</h3>
+					<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
+						<li class="tsd-signature tsd-kind-icon">multi<wbr>Graphs<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
+					</ul>
+					<ul class="tsd-descriptions">
+						<li class="tsd-description">
+							<aside class="tsd-sources">
+								<ul>
+									<li>Defined in <a href="https://github.com/kamiazya/typedoc-plugin-mermaid/blob/2a59cc2/example/Hoge.ts#L39">Hoge.ts:39</a></li>
+								</ul>
+							</aside>
+							<div class="tsd-comment tsd-typography">
+								<div class="lead">
+									<p>Subgraphs.</p>
+								</div>
+								<dl class="tsd-comment-tags">
+									<dt>mermaid</dt>
+									<dd><h4 id="subgraphs-example">Subgraphs Example</h4>
 										<div class="mermaid">graph LR
-											A --- B
-											B-->C[fa:fa-ban forbidden]
-											B-->D(fa:fa-spinner);
+											A[Hard edge] -->|Link text| B(Round edge)
+											B --> C{Decision}
+											C -->|One| D[Result one]
+											C -->|Two| E[Result two]
+									</div></dd>
+									<dt>mermaid</dt>
+									<dd><h4 id="alice-greet-to-jone">Alice greet to Jone</h4>
+										<div class="mermaid">sequenceDiagram
+											Alice->>John: Hello John, how are you?
+											John-->>Alice: Great!
 									</div></dd>
 								</dl>
 							</div>
@@ -149,7 +191,10 @@ <h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</spa
 						<a href="hoge.html" class="tsd-kind-icon">Hoge</a>
 						<ul>
 							<li class=" tsd-kind-method tsd-parent-kind-class">
-								<a href="hoge.html#exampleforgraphlr" class="tsd-kind-icon">example<wbr>For<wbr>GraphLR</a>
+								<a href="hoge.html#alicegreetingflow" class="tsd-kind-icon">alice<wbr>Greeting<wbr>Flow</a>
+							</li>
+							<li class=" tsd-kind-method tsd-parent-kind-class">
+								<a href="hoge.html#multigraphs" class="tsd-kind-icon">multi<wbr>Graphs</a>
 							</li>
 						</ul>
 					</li>

diff --git a/docs/index.html b/docs/index.html
@@ -64,23 +64,23 @@ <h1> typedoc-plugin-mermaid-example-package</h1>
 	<div class="row">
 		<div class="col-8 col-content">
 			<div class="tsd-panel tsd-typography">
-				<p><a href="https://travis-ci.org/kamiazya/typedoc-plugin-mermaid"><img src="https://travis-ci.org/kamiazya/typedoc-plugin-mermaid.svg?branch=master" alt="Build Status"></a> <a href="https://www.codefactor.io/repository/github/kamiazya/typedoc-plugin-mermaid"><img src="https://www.codefactor.io/repository/github/kamiazya/typedoc-plugin-mermaid/badge" alt="CodeFactor"></a> <a href="https://badge.fury.io/js/typedoc-plugin-mermaid"><img src="https://badge.fury.io/js/typedoc-plugin-mermaid.svg" alt="npm version"></a> <a href="https://codeclimate.com/github/kamiazya/typedoc-plugin-mermaid/maintainability"><img src="https://api.codeclimate.com/v1/badges/827855fa3daba03076b4/maintainability" alt="Maintainability"></a> <a href="https://app.fossa.io/projects/git%2Bgithub.com%2Fkamiazya%2Ftypedoc-plugin-mermaid?ref=badge_shield"><img src="https://app.fossa.io/api/projects/git%2Bgithub.com%2Fkamiazya%2Ftypedoc-plugin-mermaid.svg?type=shield" alt="FOSSA Status"></a> <a href="https://opensource.org/licenses/MIT"><img src="https://img.shields.io/badge/License-MIT-yellow.svg" alt="License: MIT"></a> <a href="https://devtoken.rocks/package/typedoc-plugin-mermaid"><img src="https://badge.devtoken.rocks/typedoc-plugin-mermaid" alt="typedoc-plugin-mermaid Dev Token"></a></p>
+				<p><a href="https://travis-ci.org/kamiazya/typedoc-plugin-mermaid"><img src="https://travis-ci.org/kamiazya/typedoc-plugin-mermaid.svg?branch=master" alt="Build Status"></a> <a href="https://www.codefactor.io/repository/github/kamiazya/typedoc-plugin-mermaid"><img src="https://www.codefactor.io/repository/github/kamiazya/typedoc-plugin-mermaid/badge" alt="CodeFactor"></a> <a href="https://badge.fury.io/js/typedoc-plugin-mermaid"><img src="https://badge.fury.io/js/typedoc-plugin-mermaid.svg" alt="npm version"></a> <a href="https://codeclimate.com/github/kamiazya/typedoc-plugin-mermaid/maintainability"><img src="https://api.codeclimate.com/v1/badges/827855fa3daba03076b4/maintainability" alt="Maintainability"></a> <a href="https://app.fossa.io/projects/git%2Bgithub.com%2Fkamiazya%2Ftypedoc-plugin-mermaid?ref=badge_shield"><img src="https://app.fossa.io/api/projects/git%2Bgithub.com%2Fkamiazya%2Ftypedoc-plugin-mermaid.svg?type=shield" alt="FOSSA Status"></a> <a href="https://opensource.org/licenses/MIT"><img src="https://img.shields.io/badge/License-MIT-yellow.svg" alt="License: MIT"></a> <a href="https://devtoken.rocks/package/typedoc-plugin-mermaid"><img src="https://badge.devtoken.rocks/typedoc-plugin-mermaid" alt="typedoc-plugin-mermaid Dev Token"></a> <a href="https://bettercodehub.com/"><img src="https://bettercodehub.com/edge/badge/kamiazya/typedoc-plugin-mermaid?branch=master" alt="BCH compliance"></a></p>
 				<h1 id="typedoc-plugin-mermaid">typedoc-plugin-mermaid</h1>
-				<p>A plugin for TypeDoc that generates graphs for mermaid.js diagrams by &quot;mermaid&quot; annotation.</p>
+				<p>A plugin for TypeDoc that generates graphs for mermaid.js diagrams by @mermaid annotation.</p>
 				<h2 id="usage">Usage</h2>
-				<p>Write tsdoc with <code>@mermaid</code> annotation.</p>
+				<p>Write tsdoc with <code>@mermaid</code> annotation</p>
 				<pre><code class="language-typescript"><span class="hljs-comment">/**
  * Hoge is sample class for example of `typedoc-plugin-mermaid`.
  *
- * @mermaid
+ * @mermaid Make TypeDoc easy to use with mermaid.js
  * graph TB
  *   mermaid.js --&gt; TypeDoc;
  */</span>
 <span class="hljs-keyword">export</span> <span class="hljs-keyword">class</span> Hoge {
 }
 </code></pre>
-				<p>↓↓↓</p>
-				<p><a href="https://kamiazya.github.io/typedoc-plugin-mermaid/classes/hoge.html"><img src="./img/example.png" alt="DEMO"></a></p>
+				<p><a href="https://kamiazya.github.io/typedoc-plugin-mermaid/classes/hoge.html">↓↓ DEMO ↓↓</a></p>
+				<p><a href="https://kamiazya.github.io/typedoc-plugin-mermaid/classes/hoge.html"><img src="./media/example.png" alt="Example"></a></p>
 				<h2 id="installation">Installation</h2>
 				<p>The plugin can then be installed using <a href="https://www.npmjs.com/">npm</a>:</p>
 				<p><a href="https://nodei.co/npm/typedoc-plugin-mermaid/"><img src="https://nodei.co/npm/typedoc-plugin-mermaid.png" alt="NPM"></a></p>

diff --git a/docs/media/example.png b/docs/media/example.png
diff --git a/example/Hoge.ts b/example/Hoge.ts
@@ -1,21 +1,40 @@
 /**
  * Hoge is sample class for example of `typedoc-plugin-mermaid`.
  *
- * @mermaid
+ * @mermaid Make TypeDoc easy to use with mermaid.js
  * graph TB
  *   mermaid.js --> TypeDoc;
  */
-export class Hoge {
+export abstract class Hoge {
 
   /**
+   * Alice says "Hello John, how are you?" to Jone,
+   * then John says "Great!".
    *
-   * @mermaid
-   * graph LR
-   *   A --- B
-   *   B-->C[fa:fa-ban forbidden]
-   *   B-->D(fa:fa-spinner);
+   * @mermaid Alice greet to Jone
+   * sequenceDiagram
+   *     Alice->>John: Hello John, how are you?
+   *     John-->>Alice: Great!
    */
-  public exampleForGraphLR() {
-    console.log('graphLR');
+  public aliceGreetingFlow() {
+    console.log('Alice', 'Hello John, how are you?');
+    console.log('John', 'Great!');
   }
+
+  /**
+   * Subgraphs.
+   *
+   * @mermaid Subgraphs Example
+   * graph LR
+   *   A[Hard edge] -->|Link text| B(Round edge)
+   *   B --> C{Decision}
+   *   C -->|One| D[Result one]
+   *   C -->|Two| E[Result two]
+   *
+   * @mermaid Alice greet to Jone
+   * sequenceDiagram
+   *   Alice->>John: Hello John, how are you?
+   *   John-->>Alice: Great!
+   */
+  public abstract multiGraphs(): void;
 }
diff --git a/example/package.json b/example/package.json
@@ -20,7 +20,7 @@
   "devDependencies": {
     "live-server": "^1.2.1",
     "typedoc": "^0.14.2",
-    "typedoc-plugin-mermaid": "^0.9.2",
+    "typedoc-plugin-mermaid": "^0.9.7",
     "typescript": "^3.3.3333"
   }
 }
diff --git a/example/typedoc.json b/example/typedoc.json
@@ -1,4 +1,5 @@
 {
   "mode": "file",
-  "out": "../docs"
+  "out": "../docs",
+  "media": "../media"
 }
diff --git a/example/yarn.lock b/example/yarn.lock
@@ -1658,10 +1658,10 @@ typedoc-default-themes@^0.5.0:
   resolved "https://registry.yarnpkg.com/typedoc-default-themes/-/typedoc-default-themes-0.5.0.tgz#6dc2433e78ed8bea8e887a3acde2f31785bd6227"
   integrity sha1-bcJDPnjti+qOiHo6zeLzF4W9Yic=
 
-typedoc-plugin-mermaid@^0.9.2:
-  version "0.9.2"
-  resolved "https://registry.yarnpkg.com/typedoc-plugin-mermaid/-/typedoc-plugin-mermaid-0.9.2.tgz#400f1f316c1b06199e9ad72a2b6f7fe401e329c9"
-  integrity sha512-ci7xriIc9RceE+o++uOqi757E2vltvb756bKHWtga2yOJIuYWHWd8JaOnlH8AitCzbEGY2q43GjhCOPyUAOwuw==
+typedoc-plugin-mermaid@^0.9.7:
+  version "0.9.7"
+  resolved "https://registry.yarnpkg.com/typedoc-plugin-mermaid/-/typedoc-plugin-mermaid-0.9.7.tgz#820ea6a4cbe9b3439804acdc811daf9c96137c2f"
+  integrity sha512-9CCJp8bFsHzKTMQ1e2UUPeAwSGzgaJP4IMzPJ3QIejx7Dupy7CF2MB0gtcGurOMTk0y/DgTRd72EoFIkVwZvaw==
 
 typedoc@^0.14.2:
   version "0.14.2"

diff --git a/img/example.png b/img/example.png
diff --git a/media/example.png b/media/example.png