From 4f0a5463117dc38fdee6d57daf72a06b68d2439f Mon Sep 17 00:00:00 2001
From: Hau Nguyen <hauvipapro@gmail.com>
Date: Sun, 6 Aug 2023 16:23:38 +0700
Subject: [PATCH] chore: re-add caksoylar/keymap-drawer

---
 Makefile                                      |   5 +
 README.md                                     |  11 +-
 .../caksoylar_keymap_drawer/keymap.svg        | 466 ++++++++++++++++++
 .../caksoylar_keymap_drawer/keymap.yaml       | 254 ++++++++++
 4 files changed, 733 insertions(+), 3 deletions(-)
 create mode 100644 dztech_dz60rgb_wkl/caksoylar_keymap_drawer/keymap.svg
 create mode 100644 dztech_dz60rgb_wkl/caksoylar_keymap_drawer/keymap.yaml

diff --git a/Makefile b/Makefile
index 684de54..57c72e0 100644
--- a/Makefile
+++ b/Makefile
@@ -2,6 +2,7 @@
 
 all:
 	$(MAKE) format
+	$(MAKE) draw
 
 format:
 	clang-format -i dztech_dz60rgb_wkl/keymaps/haunt98/*.c dztech_dz60rgb_wkl/keymaps/haunt98/*.h & \
@@ -23,6 +24,10 @@ go:
 draw:
 	$(MAKE) go
 	go run ./cmd/qmkasciigen/*.go -qmk-keyboard dztech/dz60rgb_wkl/v2_1 -qmk-keymap-file dztech_dz60rgb_wkl/keymaps_json/haunt98/keymap.json -out dztech_dz60rgb_wkl/asciiart/haunt98.txt
+	# https://github.com/caksoylar/keymap-drawer
+	pipx install keymap-drawer
+	keymap parse -q dztech_dz60rgb_wkl/keymaps_json/haunt98/keymap.json > dztech_dz60rgb_wkl/caksoylar_keymap_drawer/keymap.yaml
+	keymap draw dztech_dz60rgb_wkl/caksoylar_keymap_drawer/keymap.yaml > dztech_dz60rgb_wkl/caksoylar_keymap_drawer/keymap.svg
 
 qmk_init:
 	qmk setup -H ~/qmk_firmware
diff --git a/README.md b/README.md
index e89ec3c..557a8c7 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,8 @@
 
 ## [dztech/dz60rgb_wkl](https://github.com/qmk/qmk_firmware/tree/master/keyboards/dztech/dz60rgb_wkl)
 
-> V2.1: ATmega32U4 (AVR), takes .bin files Started shipping in June 2021 as a slightly modified version of v2.
+> V2.1: ATmega32U4 (AVR), takes .bin files Started shipping in June 2021 as a
+> slightly modified version of v2.
 
 ### Stock
 
@@ -28,9 +29,12 @@ make dztech_dz60rgb_wkl
 
 See [asciiart](dztech_dz60rgb_wkl/asciiart/haunt98.txt).
 
+![caksoylar_keymap_drawer](dztech_dz60rgb_wkl/caksoylar_keymap_drawer/keymap.svg)
+
 ## Install
 
-Locate firmware file after compile successfully or download from [QMK action workflow](https://github.com/haunt98/qmk_keymaps/actions/workflows/qmk.yml)
+Locate firmware file after compile successfully or download from
+[QMK action workflow](https://github.com/haunt98/qmk_keymaps/actions/workflows/qmk.yml)
 
 Put keyboard into bootloader mode in 2 ways:
 
@@ -49,7 +53,8 @@ Step by steps:
 4. Replace repo keymaps JSON
 5. Generate ascii: `make draw`
 
-You don't need to install [QMK CLI](https://github.com/qmk/qmk_cli) but still need QMK Toolbox.
+You don't need to install [QMK CLI](https://github.com/qmk/qmk_cli) but still
+need QMK Toolbox.
 
 ## Features
 
diff --git a/dztech_dz60rgb_wkl/caksoylar_keymap_drawer/keymap.svg b/dztech_dz60rgb_wkl/caksoylar_keymap_drawer/keymap.svg
new file mode 100644
index 0000000..8bd5a7a
--- /dev/null
+++ b/dztech_dz60rgb_wkl/caksoylar_keymap_drawer/keymap.svg
@@ -0,0 +1,466 @@
+<svg width="900.0" height="1400.0" viewBox="0 0 900.0 1400.0" class="keymap" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<style>/* inherit to force styles through use tags*/
+svg path {
+    fill: inherit;
+}
+/* font and background color specifications */
+svg.keymap {
+    font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
+    font-size: 14px;
+    font-kerning: normal;
+    text-rendering: optimizeLegibility;
+    fill: #24292e;
+}
+
+/* default key styling */
+rect.key {
+    fill: #f6f8fa;
+    stroke: #c9cccf;
+    stroke-width: 1;
+}
+
+/* color accent for combo boxes */
+rect.combo {
+    fill: #cdf;
+}
+
+/* color accent for held keys */
+rect.held, rect.combo.held {
+    fill: #fdd;
+}
+
+/* color accent for ghost (optional) keys */
+rect.ghost, rect.combo.ghost {
+    stroke-dasharray: 4, 4;
+    stroke-width: 2;
+}
+
+text {
+    text-anchor: middle;
+    dominant-baseline: middle;
+}
+
+/* styling for layer labels */
+text.label {
+    font-weight: bold;
+    text-anchor: start;
+    stroke: white;
+    stroke-width: 2;
+    paint-order: stroke;
+}
+
+/* styling for combo tap, and key hold/shifted label text */
+text.combo, text.hold, text.shifted {
+    font-size: 11px;
+}
+
+text.hold {
+    text-anchor: middle;
+    dominant-baseline: auto;
+}
+
+text.shifted {
+    text-anchor: middle;
+    dominant-baseline: hanging;
+}
+
+/* styling for hold/shifted label text in combo box */
+text.combo.hold, text.combo.shifted {
+    font-size: 8px;
+}
+
+/* lighter symbol for transparent keys */
+text.trans {
+    fill: #7b7e81;
+}
+
+/* styling for combo dendrons */
+path.combo {
+    stroke-width: 1;
+    stroke: gray;
+    fill: none;
+}
+
+/* Start Tabler Icons Cleanup */
+/* cannot use height/width with glyphs */
+.icon-tabler > path {
+    fill: inherit;
+    stroke: inherit;
+}
+/* hide tabler's default box */
+.icon-tabler > path[stroke="none"][fill="none"] {
+    visibility: collapse;
+}
+/* End Tabler Icons Cleanup */
+</style>
+<g class="layer-L0">
+<text x="30.0" y="28.0" class="label">L0:</text>
+<rect rx="6.0" ry="6.0" x="32.0" y="58.0" width="52.0" height="52.0" class="key"/>
+<text x="58.0" y="84.0" class="tap">
+<tspan x="58.0" dy="-0.6em">QK</tspan><tspan x="58.0" dy="1.2em">GESC</tspan></text>
+<rect rx="6.0" ry="6.0" x="88.0" y="58.0" width="52.0" height="52.0" class="key"/>
+<text x="114.0" y="84.0" class="tap">1</text>
+<rect rx="6.0" ry="6.0" x="144.0" y="58.0" width="52.0" height="52.0" class="key"/>
+<text x="170.0" y="84.0" class="tap">2</text>
+<rect rx="6.0" ry="6.0" x="200.0" y="58.0" width="52.0" height="52.0" class="key"/>
+<text x="226.0" y="84.0" class="tap">3</text>
+<rect rx="6.0" ry="6.0" x="256.0" y="58.0" width="52.0" height="52.0" class="key"/>
+<text x="282.0" y="84.0" class="tap">4</text>
+<rect rx="6.0" ry="6.0" x="312.0" y="58.0" width="52.0" height="52.0" class="key"/>
+<text x="338.0" y="84.0" class="tap">5</text>
+<rect rx="6.0" ry="6.0" x="368.0" y="58.0" width="52.0" height="52.0" class="key"/>
+<text x="394.0" y="84.0" class="tap">6</text>
+<rect rx="6.0" ry="6.0" x="424.0" y="58.0" width="52.0" height="52.0" class="key"/>
+<text x="450.0" y="84.0" class="tap">7</text>
+<rect rx="6.0" ry="6.0" x="480.0" y="58.0" width="52.0" height="52.0" class="key"/>
+<text x="506.0" y="84.0" class="tap">8</text>
+<rect rx="6.0" ry="6.0" x="536.0" y="58.0" width="52.0" height="52.0" class="key"/>
+<text x="562.0" y="84.0" class="tap">9</text>
+<rect rx="6.0" ry="6.0" x="592.0" y="58.0" width="52.0" height="52.0" class="key"/>
+<text x="618.0" y="84.0" class="tap">0</text>
+<rect rx="6.0" ry="6.0" x="648.0" y="58.0" width="52.0" height="52.0" class="key"/>
+<text x="674.0" y="84.0" class="tap">-</text>
+<rect rx="6.0" ry="6.0" x="704.0" y="58.0" width="52.0" height="52.0" class="key"/>
+<text x="730.0" y="84.0" class="tap">=</text>
+<rect rx="6.0" ry="6.0" x="760.0" y="58.0" width="52.0" height="52.0" class="key"/>
+<text x="786.0" y="84.0" class="tap">\</text>
+<rect rx="6.0" ry="6.0" x="816.0" y="58.0" width="52.0" height="52.0" class="key"/>
+<text x="842.0" y="84.0" class="tap">`</text>
+<rect rx="6.0" ry="6.0" x="32.0" y="114.0" width="80.0" height="52.0" class="key"/>
+<text x="72.0" y="140.0" class="tap">TAB</text>
+<rect rx="6.0" ry="6.0" x="116.0" y="114.0" width="52.0" height="52.0" class="key"/>
+<text x="142.0" y="140.0" class="tap">Q</text>
+<rect rx="6.0" ry="6.0" x="172.0" y="114.0" width="52.0" height="52.0" class="key"/>
+<text x="198.0" y="140.0" class="tap">W</text>
+<rect rx="6.0" ry="6.0" x="228.0" y="114.0" width="52.0" height="52.0" class="key"/>
+<text x="254.0" y="140.0" class="tap">E</text>
+<rect rx="6.0" ry="6.0" x="284.0" y="114.0" width="52.0" height="52.0" class="key"/>
+<text x="310.0" y="140.0" class="tap">R</text>
+<rect rx="6.0" ry="6.0" x="340.0" y="114.0" width="52.0" height="52.0" class="key"/>
+<text x="366.0" y="140.0" class="tap">T</text>
+<rect rx="6.0" ry="6.0" x="396.0" y="114.0" width="52.0" height="52.0" class="key"/>
+<text x="422.0" y="140.0" class="tap">Y</text>
+<rect rx="6.0" ry="6.0" x="452.0" y="114.0" width="52.0" height="52.0" class="key"/>
+<text x="478.0" y="140.0" class="tap">U</text>
+<rect rx="6.0" ry="6.0" x="508.0" y="114.0" width="52.0" height="52.0" class="key"/>
+<text x="534.0" y="140.0" class="tap">I</text>
+<rect rx="6.0" ry="6.0" x="564.0" y="114.0" width="52.0" height="52.0" class="key"/>
+<text x="590.0" y="140.0" class="tap">O</text>
+<rect rx="6.0" ry="6.0" x="620.0" y="114.0" width="52.0" height="52.0" class="key"/>
+<text x="646.0" y="140.0" class="tap">P</text>
+<rect rx="6.0" ry="6.0" x="676.0" y="114.0" width="52.0" height="52.0" class="key"/>
+<text x="702.0" y="140.0" class="tap">[</text>
+<rect rx="6.0" ry="6.0" x="732.0" y="114.0" width="52.0" height="52.0" class="key"/>
+<text x="758.0" y="140.0" class="tap">]</text>
+<rect rx="6.0" ry="6.0" x="788.0" y="114.0" width="80.0" height="52.0" class="key"/>
+<text x="828.0" y="140.0" class="tap">BSPC</text>
+<rect rx="6.0" ry="6.0" x="32.0" y="170.0" width="94.0" height="52.0" class="key"/>
+<text x="79.0" y="196.0" class="tap">ESC</text>
+<text x="79.0" y="220.0" class="hold">CTL</text>
+<rect rx="6.0" ry="6.0" x="130.0" y="170.0" width="52.0" height="52.0" class="key"/>
+<text x="156.0" y="196.0" class="tap">A</text>
+<rect rx="6.0" ry="6.0" x="186.0" y="170.0" width="52.0" height="52.0" class="key"/>
+<text x="212.0" y="196.0" class="tap">S</text>
+<rect rx="6.0" ry="6.0" x="242.0" y="170.0" width="52.0" height="52.0" class="key"/>
+<text x="268.0" y="196.0" class="tap">D</text>
+<rect rx="6.0" ry="6.0" x="298.0" y="170.0" width="52.0" height="52.0" class="key"/>
+<text x="324.0" y="196.0" class="tap">F</text>
+<rect rx="6.0" ry="6.0" x="354.0" y="170.0" width="52.0" height="52.0" class="key"/>
+<text x="380.0" y="196.0" class="tap">G</text>
+<rect rx="6.0" ry="6.0" x="410.0" y="170.0" width="52.0" height="52.0" class="key"/>
+<text x="436.0" y="196.0" class="tap">H</text>
+<rect rx="6.0" ry="6.0" x="466.0" y="170.0" width="52.0" height="52.0" class="key"/>
+<text x="492.0" y="196.0" class="tap">J</text>
+<rect rx="6.0" ry="6.0" x="522.0" y="170.0" width="52.0" height="52.0" class="key"/>
+<text x="548.0" y="196.0" class="tap">K</text>
+<rect rx="6.0" ry="6.0" x="578.0" y="170.0" width="52.0" height="52.0" class="key"/>
+<text x="604.0" y="196.0" class="tap">L</text>
+<rect rx="6.0" ry="6.0" x="634.0" y="170.0" width="52.0" height="52.0" class="key"/>
+<text x="660.0" y="196.0" class="tap">;</text>
+<rect rx="6.0" ry="6.0" x="690.0" y="170.0" width="52.0" height="52.0" class="key"/>
+<text x="716.0" y="196.0" class="tap">&#x27;</text>
+<rect rx="6.0" ry="6.0" x="746.0" y="170.0" width="122.0" height="52.0" class="key"/>
+<text x="807.0" y="196.0" class="tap">ENT</text>
+<rect rx="6.0" ry="6.0" x="32.0" y="226.0" width="122.0" height="52.0" class="key"/>
+<text x="93.0" y="252.0" class="tap">LSFT</text>
+<rect rx="6.0" ry="6.0" x="158.0" y="226.0" width="52.0" height="52.0" class="key"/>
+<text x="184.0" y="252.0" class="tap">Z</text>
+<rect rx="6.0" ry="6.0" x="214.0" y="226.0" width="52.0" height="52.0" class="key"/>
+<text x="240.0" y="252.0" class="tap">X</text>
+<rect rx="6.0" ry="6.0" x="270.0" y="226.0" width="52.0" height="52.0" class="key"/>
+<text x="296.0" y="252.0" class="tap">C</text>
+<rect rx="6.0" ry="6.0" x="326.0" y="226.0" width="52.0" height="52.0" class="key"/>
+<text x="352.0" y="252.0" class="tap">V</text>
+<rect rx="6.0" ry="6.0" x="382.0" y="226.0" width="52.0" height="52.0" class="key"/>
+<text x="408.0" y="252.0" class="tap">B</text>
+<rect rx="6.0" ry="6.0" x="438.0" y="226.0" width="52.0" height="52.0" class="key"/>
+<text x="464.0" y="252.0" class="tap">N</text>
+<rect rx="6.0" ry="6.0" x="494.0" y="226.0" width="52.0" height="52.0" class="key"/>
+<text x="520.0" y="252.0" class="tap">M</text>
+<rect rx="6.0" ry="6.0" x="550.0" y="226.0" width="52.0" height="52.0" class="key"/>
+<text x="576.0" y="252.0" class="tap">,</text>
+<rect rx="6.0" ry="6.0" x="606.0" y="226.0" width="52.0" height="52.0" class="key"/>
+<text x="632.0" y="252.0" class="tap">.</text>
+<rect rx="6.0" ry="6.0" x="662.0" y="226.0" width="52.0" height="52.0" class="key"/>
+<text x="688.0" y="252.0" class="tap">/</text>
+<rect rx="6.0" ry="6.0" x="718.0" y="226.0" width="94.0" height="52.0" class="key"/>
+<text x="765.0" y="252.0" class="tap">RSFT</text>
+<rect rx="6.0" ry="6.0" x="816.0" y="226.0" width="52.0" height="52.0" class="key"/>
+<text x="842.0" y="252.0" class="tap">L1</text>
+<rect rx="6.0" ry="6.0" x="32.0" y="282.0" width="80.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="116.0" y="282.0" width="52.0" height="52.0" class="key"/>
+<text x="142.0" y="308.0" class="tap">LALT</text>
+<rect rx="6.0" ry="6.0" x="172.0" y="282.0" width="80.0" height="52.0" class="key"/>
+<text x="212.0" y="308.0" class="tap">LGUI</text>
+<rect rx="6.0" ry="6.0" x="256.0" y="282.0" width="388.0" height="52.0" class="key"/>
+<text x="450.0" y="308.0" class="tap">SPC</text>
+<rect rx="6.0" ry="6.0" x="648.0" y="282.0" width="80.0" height="52.0" class="key"/>
+<text x="688.0" y="308.0" class="tap">RGUI</text>
+<rect rx="6.0" ry="6.0" x="732.0" y="282.0" width="52.0" height="52.0" class="key"/>
+<text x="758.0" y="308.0" class="tap">RALT</text>
+<rect rx="6.0" ry="6.0" x="788.0" y="282.0" width="80.0" height="52.0" class="key"/>
+</g>
+<g class="layer-L1">
+<text x="30.0" y="364.0" class="label">L1:</text>
+<rect rx="6.0" ry="6.0" x="32.0" y="394.0" width="52.0" height="52.0" class="key"/>
+<text x="58.0" y="420.0" class="tap">`</text>
+<rect rx="6.0" ry="6.0" x="88.0" y="394.0" width="52.0" height="52.0" class="key"/>
+<text x="114.0" y="420.0" class="tap">F1</text>
+<rect rx="6.0" ry="6.0" x="144.0" y="394.0" width="52.0" height="52.0" class="key"/>
+<text x="170.0" y="420.0" class="tap">F2</text>
+<rect rx="6.0" ry="6.0" x="200.0" y="394.0" width="52.0" height="52.0" class="key"/>
+<text x="226.0" y="420.0" class="tap">F3</text>
+<rect rx="6.0" ry="6.0" x="256.0" y="394.0" width="52.0" height="52.0" class="key"/>
+<text x="282.0" y="420.0" class="tap">F4</text>
+<rect rx="6.0" ry="6.0" x="312.0" y="394.0" width="52.0" height="52.0" class="key"/>
+<text x="338.0" y="420.0" class="tap">F5</text>
+<rect rx="6.0" ry="6.0" x="368.0" y="394.0" width="52.0" height="52.0" class="key"/>
+<text x="394.0" y="420.0" class="tap">F6</text>
+<rect rx="6.0" ry="6.0" x="424.0" y="394.0" width="52.0" height="52.0" class="key"/>
+<text x="450.0" y="420.0" class="tap">F7</text>
+<rect rx="6.0" ry="6.0" x="480.0" y="394.0" width="52.0" height="52.0" class="key"/>
+<text x="506.0" y="420.0" class="tap">F8</text>
+<rect rx="6.0" ry="6.0" x="536.0" y="394.0" width="52.0" height="52.0" class="key"/>
+<text x="562.0" y="420.0" class="tap">F9</text>
+<rect rx="6.0" ry="6.0" x="592.0" y="394.0" width="52.0" height="52.0" class="key"/>
+<text x="618.0" y="420.0" class="tap">F10</text>
+<rect rx="6.0" ry="6.0" x="648.0" y="394.0" width="52.0" height="52.0" class="key"/>
+<text x="674.0" y="420.0" class="tap">F11</text>
+<rect rx="6.0" ry="6.0" x="704.0" y="394.0" width="52.0" height="52.0" class="key"/>
+<text x="730.0" y="420.0" class="tap">F12</text>
+<rect rx="6.0" ry="6.0" x="760.0" y="394.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="816.0" y="394.0" width="52.0" height="52.0" class="key"/>
+<text x="842.0" y="420.0" class="tap">TG(2)</text>
+<rect rx="6.0" ry="6.0" x="32.0" y="450.0" width="80.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="116.0" y="450.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="172.0" y="450.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="228.0" y="450.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="284.0" y="450.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="340.0" y="450.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="396.0" y="450.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="452.0" y="450.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="508.0" y="450.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="564.0" y="450.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="620.0" y="450.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="676.0" y="450.0" width="52.0" height="52.0" class="key"/>
+<text x="702.0" y="476.0" class="tap">UP</text>
+<rect rx="6.0" ry="6.0" x="732.0" y="450.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="788.0" y="450.0" width="80.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="32.0" y="506.0" width="94.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="130.0" y="506.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="186.0" y="506.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="242.0" y="506.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="298.0" y="506.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="354.0" y="506.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="410.0" y="506.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="466.0" y="506.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="522.0" y="506.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="578.0" y="506.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="634.0" y="506.0" width="52.0" height="52.0" class="key"/>
+<text x="660.0" y="532.0" class="tap">LEFT</text>
+<rect rx="6.0" ry="6.0" x="690.0" y="506.0" width="52.0" height="52.0" class="key"/>
+<text x="716.0" y="532.0" class="tap">RGHT</text>
+<rect rx="6.0" ry="6.0" x="746.0" y="506.0" width="122.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="32.0" y="562.0" width="122.0" height="52.0" class="trans key"/>
+<text x="93.0" y="588.0" class="trans tap">▽</text>
+<rect rx="6.0" ry="6.0" x="158.0" y="562.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="214.0" y="562.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="270.0" y="562.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="326.0" y="562.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="382.0" y="562.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="438.0" y="562.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="494.0" y="562.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="550.0" y="562.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="606.0" y="562.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="662.0" y="562.0" width="52.0" height="52.0" class="key"/>
+<text x="688.0" y="588.0" class="tap">DOWN</text>
+<rect rx="6.0" ry="6.0" x="718.0" y="562.0" width="94.0" height="52.0" class="trans key"/>
+<text x="765.0" y="588.0" class="trans tap">▽</text>
+<rect rx="6.0" ry="6.0" x="816.0" y="562.0" width="52.0" height="52.0" class="held key"/>
+<rect rx="6.0" ry="6.0" x="32.0" y="618.0" width="80.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="116.0" y="618.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="172.0" y="618.0" width="80.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="256.0" y="618.0" width="388.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="648.0" y="618.0" width="80.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="732.0" y="618.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="788.0" y="618.0" width="80.0" height="52.0" class="key"/>
+</g>
+<g class="layer-L2">
+<text x="30.0" y="700.0" class="label">L2:</text>
+<rect rx="6.0" ry="6.0" x="32.0" y="730.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="88.0" y="730.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="144.0" y="730.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="200.0" y="730.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="256.0" y="730.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="312.0" y="730.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="368.0" y="730.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="424.0" y="730.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="480.0" y="730.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="536.0" y="730.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="592.0" y="730.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="648.0" y="730.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="704.0" y="730.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="760.0" y="730.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="816.0" y="730.0" width="52.0" height="52.0" class="key"/>
+<text x="842.0" y="756.0" class="tap">TO(0)</text>
+<rect rx="6.0" ry="6.0" x="32.0" y="786.0" width="80.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="116.0" y="786.0" width="52.0" height="52.0" class="key"/>
+<text x="142.0" y="812.0" class="tap">BRMD</text>
+<rect rx="6.0" ry="6.0" x="172.0" y="786.0" width="52.0" height="52.0" class="key"/>
+<text x="198.0" y="812.0" class="tap">BRMU</text>
+<rect rx="6.0" ry="6.0" x="228.0" y="786.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="284.0" y="786.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="340.0" y="786.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="396.0" y="786.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="452.0" y="786.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="508.0" y="786.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="564.0" y="786.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="620.0" y="786.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="676.0" y="786.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="732.0" y="786.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="788.0" y="786.0" width="80.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="32.0" y="842.0" width="94.0" height="52.0" class="key"/>
+<text x="79.0" y="868.0" class="tap">CAPS</text>
+<rect rx="6.0" ry="6.0" x="130.0" y="842.0" width="52.0" height="52.0" class="key"/>
+<text x="156.0" y="868.0" class="tap">VOLD</text>
+<rect rx="6.0" ry="6.0" x="186.0" y="842.0" width="52.0" height="52.0" class="key"/>
+<text x="212.0" y="868.0" class="tap">VOLU</text>
+<rect rx="6.0" ry="6.0" x="242.0" y="842.0" width="52.0" height="52.0" class="key"/>
+<text x="268.0" y="868.0" class="tap">MUTE</text>
+<rect rx="6.0" ry="6.0" x="298.0" y="842.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="354.0" y="842.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="410.0" y="842.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="466.0" y="842.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="522.0" y="842.0" width="52.0" height="52.0" class="key"/>
+<text x="548.0" y="868.0" class="tap">HOME</text>
+<rect rx="6.0" ry="6.0" x="578.0" y="842.0" width="52.0" height="52.0" class="key"/>
+<text x="604.0" y="868.0" class="tap">PGUP</text>
+<rect rx="6.0" ry="6.0" x="634.0" y="842.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="690.0" y="842.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="746.0" y="842.0" width="122.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="32.0" y="898.0" width="122.0" height="52.0" class="trans key"/>
+<text x="93.0" y="924.0" class="trans tap">▽</text>
+<rect rx="6.0" ry="6.0" x="158.0" y="898.0" width="52.0" height="52.0" class="key"/>
+<text x="184.0" y="924.0" class="tap">
+<tspan x="184.0" dy="-0.6em">RGB</tspan><tspan x="184.0" dy="1.2em">HUI</tspan></text>
+<rect rx="6.0" ry="6.0" x="214.0" y="898.0" width="52.0" height="52.0" class="key"/>
+<text x="240.0" y="924.0" class="tap">
+<tspan x="240.0" dy="-0.6em">RGB</tspan><tspan x="240.0" dy="1.2em">SAI</tspan></text>
+<rect rx="6.0" ry="6.0" x="270.0" y="898.0" width="52.0" height="52.0" class="key"/>
+<text x="296.0" y="924.0" class="tap">
+<tspan x="296.0" dy="-0.6em">RGB</tspan><tspan x="296.0" dy="1.2em">VAI</tspan></text>
+<rect rx="6.0" ry="6.0" x="326.0" y="898.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="382.0" y="898.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="438.0" y="898.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="494.0" y="898.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="550.0" y="898.0" width="52.0" height="52.0" class="key"/>
+<text x="576.0" y="924.0" class="tap">END</text>
+<rect rx="6.0" ry="6.0" x="606.0" y="898.0" width="52.0" height="52.0" class="key"/>
+<text x="632.0" y="924.0" class="tap">PGDN</text>
+<rect rx="6.0" ry="6.0" x="662.0" y="898.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="718.0" y="898.0" width="94.0" height="52.0" class="trans key"/>
+<text x="765.0" y="924.0" class="trans tap">▽</text>
+<rect rx="6.0" ry="6.0" x="816.0" y="898.0" width="52.0" height="52.0" class="key"/>
+<text x="842.0" y="924.0" class="tap">L3</text>
+<rect rx="6.0" ry="6.0" x="32.0" y="954.0" width="80.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="116.0" y="954.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="172.0" y="954.0" width="80.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="256.0" y="954.0" width="388.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="648.0" y="954.0" width="80.0" height="52.0" class="key"/>
+<text x="688.0" y="980.0" class="tap">
+<tspan x="688.0" dy="-0.6em">RGB</tspan><tspan x="688.0" dy="1.2em">TOG</tspan></text>
+<rect rx="6.0" ry="6.0" x="732.0" y="954.0" width="52.0" height="52.0" class="key"/>
+<text x="758.0" y="980.0" class="tap">
+<tspan x="758.0" dy="-0.6em">RGB</tspan><tspan x="758.0" dy="1.2em">MOD</tspan></text>
+<rect rx="6.0" ry="6.0" x="788.0" y="954.0" width="80.0" height="52.0" class="key"/>
+</g>
+<g class="layer-L3">
+<text x="30.0" y="1036.0" class="label">L3:</text>
+<rect rx="6.0" ry="6.0" x="32.0" y="1066.0" width="52.0" height="52.0" class="key"/>
+<text x="58.0" y="1092.0" class="tap">
+<tspan x="58.0" dy="-0.6em">QK</tspan><tspan x="58.0" dy="1.2em">BOOT</tspan></text>
+<rect rx="6.0" ry="6.0" x="88.0" y="1066.0" width="52.0" height="52.0" class="key"/>
+<text x="114.0" y="1092.0" class="tap">
+<tspan x="114.0" dy="-0.6em">EE</tspan><tspan x="114.0" dy="1.2em">CLR</tspan></text>
+<rect rx="6.0" ry="6.0" x="144.0" y="1066.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="200.0" y="1066.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="256.0" y="1066.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="312.0" y="1066.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="368.0" y="1066.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="424.0" y="1066.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="480.0" y="1066.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="536.0" y="1066.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="592.0" y="1066.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="648.0" y="1066.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="704.0" y="1066.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="760.0" y="1066.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="816.0" y="1066.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="32.0" y="1122.0" width="80.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="116.0" y="1122.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="172.0" y="1122.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="228.0" y="1122.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="284.0" y="1122.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="340.0" y="1122.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="396.0" y="1122.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="452.0" y="1122.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="508.0" y="1122.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="564.0" y="1122.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="620.0" y="1122.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="676.0" y="1122.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="732.0" y="1122.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="788.0" y="1122.0" width="80.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="32.0" y="1178.0" width="94.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="130.0" y="1178.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="186.0" y="1178.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="242.0" y="1178.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="298.0" y="1178.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="354.0" y="1178.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="410.0" y="1178.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="466.0" y="1178.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="522.0" y="1178.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="578.0" y="1178.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="634.0" y="1178.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="690.0" y="1178.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="746.0" y="1178.0" width="122.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="32.0" y="1234.0" width="122.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="158.0" y="1234.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="214.0" y="1234.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="270.0" y="1234.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="326.0" y="1234.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="382.0" y="1234.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="438.0" y="1234.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="494.0" y="1234.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="550.0" y="1234.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="606.0" y="1234.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="662.0" y="1234.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="718.0" y="1234.0" width="94.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="816.0" y="1234.0" width="52.0" height="52.0" class="held key"/>
+<rect rx="6.0" ry="6.0" x="32.0" y="1290.0" width="80.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="116.0" y="1290.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="172.0" y="1290.0" width="80.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="256.0" y="1290.0" width="388.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="648.0" y="1290.0" width="80.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="732.0" y="1290.0" width="52.0" height="52.0" class="key"/>
+<rect rx="6.0" ry="6.0" x="788.0" y="1290.0" width="80.0" height="52.0" class="key"/>
+</g>
+</svg>
diff --git a/dztech_dz60rgb_wkl/caksoylar_keymap_drawer/keymap.yaml b/dztech_dz60rgb_wkl/caksoylar_keymap_drawer/keymap.yaml
new file mode 100644
index 0000000..64dfbed
--- /dev/null
+++ b/dztech_dz60rgb_wkl/caksoylar_keymap_drawer/keymap.yaml
@@ -0,0 +1,254 @@
+layout: {qmk_keyboard: dztech/dz60rgb_wkl/v2_1, qmk_layout: LAYOUT_60_tsangan_hhkb}
+layers:
+  L0:
+  - QK GESC
+  - '1'
+  - '2'
+  - '3'
+  - '4'
+  - '5'
+  - '6'
+  - '7'
+  - '8'
+  - '9'
+  - '0'
+  - '-'
+  - '='
+  - \
+  - '`'
+  - TAB
+  - Q
+  - W
+  - E
+  - R
+  - T
+  - Y
+  - U
+  - I
+  - O
+  - P
+  - '['
+  - ']'
+  - BSPC
+  - {t: ESC, h: CTL}
+  - A
+  - S
+  - D
+  - F
+  - G
+  - H
+  - J
+  - K
+  - L
+  - ;
+  - ''''
+  - ENT
+  - LSFT
+  - Z
+  - X
+  - C
+  - V
+  - B
+  - N
+  - M
+  - ','
+  - .
+  - /
+  - RSFT
+  - L1
+  - ''
+  - LALT
+  - LGUI
+  - SPC
+  - RGUI
+  - RALT
+  - ''
+  L1:
+  - '`'
+  - F1
+  - F2
+  - F3
+  - F4
+  - F5
+  - F6
+  - F7
+  - F8
+  - F9
+  - F10
+  - F11
+  - F12
+  - ''
+  - TG(2)
+  - ''
+  - ''
+  - ''
+  - ''
+  - ''
+  - ''
+  - ''
+  - ''
+  - ''
+  - ''
+  - ''
+  - UP
+  - ''
+  - ''
+  - ''
+  - ''
+  - ''
+  - ''
+  - ''
+  - ''
+  - ''
+  - ''
+  - ''
+  - ''
+  - LEFT
+  - RGHT
+  - ''
+  - {t: ▽, type: trans}
+  - ''
+  - ''
+  - ''
+  - ''
+  - ''
+  - ''
+  - ''
+  - ''
+  - ''
+  - DOWN
+  - {t: ▽, type: trans}
+  - {type: held}
+  - ''
+  - ''
+  - ''
+  - ''
+  - ''
+  - ''
+  - ''
+  L2:
+  - ''
+  - ''
+  - ''
+  - ''
+  - ''
+  - ''
+  - ''
+  - ''
+  - ''
+  - ''
+  - ''
+  - ''
+  - ''
+  - ''
+  - TO(0)
+  - ''
+  - BRMD
+  - BRMU
+  - ''
+  - ''
+  - ''
+  - ''
+  - ''
+  - ''
+  - ''
+  - ''
+  - ''
+  - ''
+  - ''
+  - CAPS
+  - VOLD
+  - VOLU
+  - MUTE
+  - ''
+  - ''
+  - ''
+  - ''
+  - HOME
+  - PGUP
+  - ''
+  - ''
+  - ''
+  - {t: ▽, type: trans}
+  - RGB HUI
+  - RGB SAI
+  - RGB VAI
+  - ''
+  - ''
+  - ''
+  - ''
+  - END
+  - PGDN
+  - ''
+  - {t: ▽, type: trans}
+  - L3
+  - ''
+  - ''
+  - ''
+  - ''
+  - RGB TOG
+  - RGB MOD
+  - ''
+  L3:
+  - QK BOOT
+  - EE CLR
+  - ''
+  - ''
+  - ''
+  - ''
+  - ''
+  - ''
+  - ''
+  - ''
+  - ''
+  - ''
+  - ''
+  - ''
+  - ''
+  - ''
+  - ''
+  - ''
+  - ''
+  - ''
+  - ''
+  - ''
+  - ''
+  - ''
+  - ''
+  - ''
+  - ''
+  - ''
+  - ''
+  - ''
+  - ''
+  - ''
+  - ''
+  - ''
+  - ''
+  - ''
+  - ''
+  - ''
+  - ''
+  - ''
+  - ''
+  - ''
+  - ''
+  - ''
+  - ''
+  - ''
+  - ''
+  - ''
+  - ''
+  - ''
+  - ''
+  - ''
+  - ''
+  - ''
+  - {type: held}
+  - ''
+  - ''
+  - ''
+  - ''
+  - ''
+  - ''
+  - ''