Gogs: 画像参照の代わりに、マークダウンエディタでテキストUML図をサポートします

作成日 2017年03月03日 · 3コメント · ソース: gogs/gogs

テキストUMLダイアグラムは、ダイアグラムのテキスト表現から単純なSVGUMLチャートダイアグラムを描画します。フローチャートを例にとってみましょう。
問題のコメントやWikiページなどのマークダウンエディタで、以下のテキストコードを入力しました。

st=>start: Start
e=>end: End
op1=>operation: My Operation
sub1=>subroutine: My Subroutine
cond=>condition: Yes or No?
io=>inputoutput: catch something...

st->op1->cond
cond(yes)->io->e
cond(no)->sub1(right)->op1

次に、ページが表示されたときに、単純なSVGフローチャート図としてレンダリングされます。

flow chart diagram

それはクールな機能です！ゴグがサポートできれば、画像参照なしでプロジェクトwikiにUML図を投稿できます。現在、gogswikiの画像リンクを提供するために外部画像Webサイトをセットアップする必要がありました。

この機能は、プラグインとしてgogsに導入できます。詳細については、以下のリファレンスを参照してください。

シーケンス：テキストをUMLシーケンス図に変換します
フローチャート：図のテキスト表現から単純なSVGフローチャート図を描画します
人魚：javascriptを介してテキストからチャートを生成するためのシンプルなマークダウンのようなスクリプト言語

私はすでにこの機能をサポートしているオフラインマークダウンエディターとしてTyporaを使用していますが、gogsもサポートされている場合は、その出力を完全にgogswikiに投稿することを期待していました。

チームに感謝します！お疲れ様でした！

maybe 🎯 feature

ソース

baikangwang

👍12 ❤10

最も参考になるコメント

私はそのための迅速な解決策を持っていました。次の行をtemplates / inject /head.tmplに追加します。

<script src="https://unpkg.com/[email protected]/dist/mermaid.min.js"></script>
<script>
    $(document).ready(function() {
        mermaid.init({noteMargin: 10}, ".language-mermaid");
    });
</script>

サービスを再開します

terzinnorbert 2018年10月17日

❤4

全てのコメント3件

私はそのための迅速な解決策を持っていました。次の行をtemplates / inject /head.tmplに追加します。

<script src="https://unpkg.com/[email protected]/dist/mermaid.min.js"></script>
<script>
    $(document).ready(function() {
        mermaid.init({noteMargin: 10}, ".language-mermaid");
    });
</script>

サービスを再開します

terzinnorbert 2018年10月17日

❤4

Gogsバージョン0.11.86.0130

上記のスクリプトをtemplates / inject / head.tmplに追加した後、gogswebを再起動します。

次に、マークダウンファイルを編集するか、次のように発行します。

st=>start: Start
op=>operation: Your Operation
cond=>condition: Yes or No?
e=>end

st->op->cond
cond(yes)->e
cond(no)->op

ただし、プレビューまたは保存しても何も起こりません。これらの手順が正しい場合は？

jianblog 2019年05月22日

Gogsバージョン0.11.86.0130
上記のスクリプトをtemplates / inject / head.tmplに追加した後、gogswebを再起動します。
次に、マークダウンファイルを編集するか、次のように発行します。
st=>start: Start
op=>operation: Your Operation
cond=>condition: Yes or No?
e=>end

st->op->cond
cond(yes)->e
cond(no)->op
ただし、プレビューまたは保存しても何も起こりません。これらの手順が正しい場合は？

@terzinnorbertが投稿したソリューションによると、彼は人魚（素晴らしいオープンソースのテキストUMLツール）ライブラリを
したがって、次のような人魚の構文に従う必要があります。

graph TD:
    A-->B;
    B-->C;
    C-->D;

詳細については、 https：//sailor-js.github.io/sailor/#/READMEにアクセスしてください。

それは私にとって完璧に機能します。

ghost 2020年03月09日

このページは役に立ちましたか？

0 / 5 - 0 評価

Gogs: 画像参照の代わりに、マークダウンエディタでテキストUML図をサポートします

最も参考になるコメント

全てのコメント3件

関連する問題