Graphで作成した図をPNGで保存すると、菱形の背景が黒になります。

[tokyo-tokkyo]

初めまして。 とても良いプラグインを見つけたと思い、使い方を練習しています。

その中で、#21の方と同じ現象だと思うのですが、graphで作成したフローズをPNGで保存すると、菱形の背景が真っ黒になってしまいました。

環境は、

Atom 1.6.2 atom-mermaid 0.3.3

で、下記の内容を試しました。

graph TB

id001(あいうえお) id002(かきくけこ) id003{ア行かどうか} id004(プールA) id005(プールB)

id001 --> id003 id002 --> id003 id003 --> |yes| id004

id003 --> |no| id005

改善方法はありますでしょうか。 よろしくお願い致します。

[y-takey]

はじめまして、 @tokyo-tokkyo さん。 ご連絡ありがとうございます。考慮できていないパターンがありましたので、対応して公開しました。 atom-mermaidをバージョン0.3.4にアップデートして再度お試しください。 他にも考慮できていないパターンがあるかもしれませんので、また何かあればご連絡ください。

[tokyo-tokkyo]

早々のご対応ありがとうございます！ ただ、先程試させていただいたのですが、やはり菱形の背景が黒になってしまいます。 私の方で何か他に出せる情報がありますでしょうか。 よろしくお願い致します。

[y-takey]

念の為に以下2点を確認させてください。

1.マークダウンテキストは先日ご提示下さったものと同一でしょうか？

2. atom-mermaidは正常に0.3.4にアップデートできているでしょうか？(アップデート時にエラーにはなっていないでしょうか？)また、アップデート後にatom自体の再起動はされましたでしょうか？

[tokyo-tokkyo]

1. はい、同一の内容で確認を行いました。
2. Atom の Installed Packages 上では、0.3.4 と表示されておりますので、エラーとはなっていない様に 見えます。 念のため PC 自体も再起動しましたが、現象変わらずとなっております。

よろしくお願い致します。

[y-takey]

早速のご返信をありがとうございます。 当方の環境では事象の再現ができず、難航しています。当座の回避方法としては、mermaidのstyleを用いて以下のように指定するとどうでしょうか？

graph TB
~省略~
id003{ア行かどうか}
~省略~
id003 --> |yes| id004

style id003 fill:#B3E5FC,stroke:#0D47A1,stroke-width:2px;

ご存知かもしれませんがstyle指定については公式ページをご覧下さい。

[tokyo-tokkyo]

指定の背景色で保存されました！この方法でやっていきたいと思います。 ありがとうございました！

[y-takey]

うまくいって良かったです。 😄