draw.io 自作の図形にスタイルを設定する方法


draw.ioを使っていると、良い図形がなくて困るときがあります。
そんなときはお絵かきソフトで自作して、インポートして使ってらっしゃらる方も多いと思います。

でも、図形はそのままで色だけ変えたいときってありますよね？
色を変えて作図すればよいのですが、面倒です・・・:sweat:。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3751007/a135cfc6-cef0-6827-5a43-662530c6a358.png)
※公開鍵（のつもり）:sweat_smile:

draw.ioにはスタイルを設定できる図形があるので、
自作図形もこのようにできないかなと思って色々調べてみました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3751007/35765fd6-ba7a-31ac-51a5-468ae65bacac.png)
※draw.ioによるスタイル設定

---
### 大まかな手順は以下のとおりです。

### 1．自作SVGをテキストエディタで開き、styleタグを埋め込む

``` html:自作SVGのpathタグの前に挿入
<!-- 略 -->
<style type="text/css">
.st0{fill:#a2a2a2;}
.st1{fill:#8e8e8e;}
.st2{fill:#ffffff;stroke:#ffffff;}
</style>
<path>
<!-- 略 -->

```
### 2. 自作SVGのfill、stroke属性を削除しclass属性を与える

::: note info
属性の削除と追加

(略)
id=”path14”
**class=”st2”** 　←クラスst2のスタイルを指定する場合
style=”….(略);~~fill:#ffcc00;stroke:none;~~ ….(略)
:::

### 3. draw.ioにインポートし、設定を加える

 **`スタイル`タブ→`編集`プルダウン→`フォーマットを編集`**

``` html:shape=image;のあとに埋め込み
shape=image;editableCssRules=.*;
```


以下の記事を参考にしています

https://www.drawio.com/doc/faq/svg-edit-colours

---

**ここからは、詳しく説明していきます。**

**1. 作図してSVG形式でExport**
**2. SVGにstyleタグでCSSクラス定義を埋め込む**
**3. fillやstrokeの属性を削除する**
**4. draw.ioに図形をインポートする**
**5. 図形のフォーマットに属性を加える**

---

## 1. 作図してSVG形式でExport

まず作図して、SVG形式でExportしましょう。
今回はInkscapeを使用しましたが、SVG形式を扱えるなら他のソフトでも大丈夫だと思います。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3751007/662ddc10-fbe4-c1b9-fbb5-bd983cc75248.png)

:::note info
Export時は...
 * 「選択中のもののみエクスポート」にチェックを入れます
 * 「Plain SVG(*.svg)」を指定します
:::


 ## 2. SVGにstyleタグでCSSクラス定義を埋め込む
* Exportしたファイルをテキストエディタで開き、styleタグを埋め込みます。

``` html:自作SVGに埋め込む
<style type="text/css">
.st0{fill:#a2a2a2;}
.st1{fill:#8e8e8e;}
.st2{fill:#ffffff;stroke:#ffffff;}
</style>
```
## 3. fillやstrokeの属性を削除する
* styleタグで定義したスタイルクラス(.st0や.st1、.st2のこと)を反映させたい場所を特定します。

* 該当箇所の`fill:#xxxxxx`や`stroke:xxxxxx`の属性を削除しましょう。

変更前
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3751007/f1a76e46-682c-247c-31e4-31b34b6cc43e.png)

変更後：クラス属性を与え、fill属性を削除
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3751007/6b307bf5-0866-567a-0c62-237e3e5ca501.png)
※st0にはstroke属性のスタイルしていないので、stroke属性は削除していません。

::: note info
* この例ですと、`id=path14`が鍵のpath、`id=tspan9-8`が"公"という文字のpathに該当します。
* fillやstroke属性が残っていると、この設定が優先され、スタイルが反映されません。
:::

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3751007/e1147a2c-21cd-a946-7ba7-74ae1812bd32.png)
※左が変更前、右が変更後

## 4. draw.ioに図形をインポートする
 **`ファイル`→`次の場所からインポート`**
 
## 5. draw.ioでの設定

自作図形をインポートしたら、
 **`スタイル`タブ→`編集`プルダウン→`フォーマットを編集`** で
編集用のダイアログが表示されるので、以下の属性を追加して適用しましょう。

`editableCssRules=.*;`


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3751007/33ab1d0b-44bb-8e2c-fe1e-9ca5a7aa3841.png)




![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3751007/1695721d-bf19-12e4-8944-1c2da8432069.png)

``` html:shape=image;のあとに埋め込み
shape=image;editableCssRules=.*;
```

## スタイルを変更できるようになった！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3751007/fadcdbf7-ea10-763b-d96c-09a71cc8d445.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3751007/fb966b81-509a-d7bd-07eb-9cf4c53115fb.png)


## お疲れさまでした。:relaxed: