|
| 1 | +--- |
| 2 | +sidebar_position: 1 |
| 3 | +--- |
| 4 | + |
| 5 | +# Overview |
| 6 | + |
| 7 | +このページではZennの全体像を知ってもらうため、Zennの各サービス、ツール、パッケージの概要とそれらの依存関係について説明します。 |
| 8 | + |
| 9 | +## 依存関係グラフ |
| 10 | + |
| 11 | +Zennの各サービス、ツール、パッケージの依存関係グラフを以下に示します。 |
| 12 | + |
| 13 | +- 実線: npmパッケージに依存 |
| 14 | +- 破線: APIを呼び出すなど間接的に依存 |
| 15 | + |
| 16 | +```mermaid |
| 17 | +flowchart TD |
| 18 | + classDef Service stroke-width:4px; |
| 19 | +
|
| 20 | + zenn.dev:::Service |
| 21 | + zenn-cli:::Service |
| 22 | + zenn-vscode-extension:::Service |
| 23 | + embed.zenn.studio:::Service |
| 24 | + backend-api:::Service |
| 25 | + api-markdown-html:::Service |
| 26 | +
|
| 27 | + zenn.dev-->zenn-embed-elements |
| 28 | + zenn.dev-->zenn-content-css |
| 29 | + zenn.dev-.http.->api-markdown-html |
| 30 | + zenn.dev-.http.->embed.zenn.studio |
| 31 | + zenn.dev-.http.->backend-api |
| 32 | +
|
| 33 | + zenn-cli-->zenn-markdown-html |
| 34 | + zenn-cli-->zenn-content-css |
| 35 | + zenn-cli-->zenn-validator |
| 36 | + zenn-cli-->zenn-embed-elements |
| 37 | + zenn-cli-.http.->embed.zenn.studio |
| 38 | +
|
| 39 | + zenn-vscode-extension-->zenn-markdown-html |
| 40 | + zenn-vscode-extension-->zenn-content-css |
| 41 | + zenn-vscode-extension-->zenn-validator |
| 42 | + zenn-vscode-extension-->zenn-embed-elements |
| 43 | + zenn-vscode-extension-.http.->embed.zenn.studio |
| 44 | +
|
| 45 | + backend-api-.http.->api-markdown-html |
| 46 | +
|
| 47 | + api-markdown-html-->zenn-markdown-html |
| 48 | +``` |
| 49 | + |
| 50 | +## サービス |
| 51 | + |
| 52 | +### zenn.dev |
| 53 | + |
| 54 | +Zennのメインサービスです。Next.jsのプロジェクトです。 |
| 55 | + |
| 56 | +リポジトリは非公開。 |
| 57 | + |
| 58 | +### backend-api |
| 59 | + |
| 60 | +zenn.devのバックエンドサーバーです。Ruby on Railsのプロジェクトです。 |
| 61 | + |
| 62 | +リポジトリは非公開。 |
| 63 | + |
| 64 | +### embed.zenn.studio |
| 65 | + |
| 66 | +markdownの埋め込み要素を表示するためのiframeを返すサーバーです。Next.jsのプロジェクトです。 |
| 67 | + |
| 68 | +リポジトリは非公開。 |
| 69 | + |
| 70 | +### api-markdown-html |
| 71 | + |
| 72 | +markdownをZennで表示可能なHTMLに変換するAPIです。`zenn-markdown-html` をラップしたCloud Functions(Node.js)のプロジェクトです。 |
| 73 | + |
| 74 | +リポジトリは非公開。 |
| 75 | + |
| 76 | +## ツール |
| 77 | + |
| 78 | +### zenn-cli |
| 79 | + |
| 80 | +markdownをローカルで作成・プレビューするためのCLIとWebのツールです。JavaScript(TypeScript)とNode.jsのプロジェクトです。 |
| 81 | + |
| 82 | +[GitHubリポジトリ](https://github.com/zenn-dev/zenn-editor/tree/main/packages/zenn-cli) |
| 83 | + |
| 84 | +### zenn-vscode-extension |
| 85 | + |
| 86 | +markdownをVSCode for the Web(github.devなど)で作成・プレビューするためのVSCode Web拡張機能です。JavaScript(TypeScript)のプロジェクトです。 |
| 87 | + |
| 88 | +[GitHubリポジトリ](https://github.com/zenn-dev/zenn-vscode-extension) |
| 89 | + |
| 90 | +## パッケージ |
| 91 | + |
| 92 | +### zenn-content-css |
| 93 | + |
| 94 | +ZennのHTMLに適用するCSSを提供するパッケージです。 |
| 95 | + |
| 96 | +[GitHubリポジトリ](https://github.com/zenn-dev/zenn-editor/tree/main/packages/zenn-content-css) |
| 97 | + |
| 98 | +### zenn-embed-elements |
| 99 | + |
| 100 | +markdownの埋め込み要素をクライアント側でHTMLに変換するパッケージです。 |
| 101 | + |
| 102 | +[GitHubリポジトリ](https://github.com/zenn-dev/zenn-editor/tree/main/packages/zenn-embed-elements) |
| 103 | + |
| 104 | +### zenn-markdown-html |
| 105 | + |
| 106 | +markdownをZennで表示可能なHTMLに変換するパッケージです。 |
| 107 | + |
| 108 | +[GitHubリポジトリ](https://github.com/zenn-dev/zenn-editor/tree/main/packages/zenn-markdown-html) |
| 109 | + |
| 110 | +### zenn-validator |
| 111 | + |
| 112 | +markdownの内容(frontmatterなどZennの仕様)を検証するパッケージです。 |
| 113 | + |
| 114 | +[GitHubリポジトリ](https://github.com/zenn-dev/zenn-editor/tree/main/packages/zenn-validator) |
0 commit comments