Kanji Colorizer (stroke order diagrams)
This item is large, and may take some time to download.
Description
Download
As add-ons are programs downloaded from the internet, they are potentially malicious. You should only download add-ons you trust.
- 2.1.0 (updated 2020-11-04)
To download this add-on, please copy and paste the following code into Anki 2.1:
1964372878
If you were linked to this page from the internet, please open Anki on your computer, go to the Tools menu and then Add-ons>Browse & Install to paste in the code.
This add-on previously supported Anki 2.0. You can download the last version supporting 2.0 here. As Anki 2.0 has been discontinued, no support is available for this version.
All Anki 2.1.x Add-Ons Contact Author
Reviews






Since phone manufactures won't even let you install new fonts nowadays, this add-on is probably the easiest way to get stroke order diagrams on all platforms.
Two hints for fellow users:
1. You don't only have to restart anki after installing the add-on but also after changing its settings before you can generate diagrams.
2. What the author is referring to as "model" is actually called "note type" in anki. Press ctrl+shift+n to manage them.







If you need to resize the images, just go to Add-ons > double-click on Kanji Colorizer > adjust "image-size" to your liking > Close this window > Tools > Kanji Colorizer: (re)generate all > then restart Anki :)







Only drawback, it takes up a lot of space. I like having space to draw the kanjis myself.
So here's how I deal with that:
* create a scrollbox that only scrolls horizontally
* put the images in there
* resize it to fit the box
* hide them entirely and add a button with which we can display / hide the diagrams
```
<span style="font-size: 20px; "> {{Meaning}} </span>
<hr id=answer>
<tts style="display:none" service="android" voice="ja_JP">{{Expression}}</tts>
<span style="font-size: 40px; ">
{{furigana:Reading}}
</span>
<br>
<button onclick="showHideStrokeOrder()">Stroke Order</button>
<center>
<div id="scrollboxStrokeOrder" style="border:1px solid black;height:150px;width:100%;white-space: nowrap;overflow-y:hidden;overflow-x:auto;display:none">
<div id='strokeOrderPictures'>{{Stroke Order Diagram}}</div>
</div>
</center>
<script>
function showHideStrokeOrder() {
var scrollbox = document.getElementById("scrollboxStrokeOrder");
if (scrollbox.style.display === "none") {
scrollbox.style.display = "block";
resizeStrokeOrderDiagrams();
} else {
scrollbox.style.display = "none";
};
}
function resizeStrokeOrderDiagrams(){
var scrollbox = document.getElementById("scrollboxStrokeOrder");
var imgs = document.getElementById('strokeOrderPictures');
var maxHeight= parseFloat(scrollbox.style.height)
var imgsHeight = imgs.firstChild.height
if(imgsHeight > maxHeight) {
var diagrams = imgs.getElementsByTagName("img");
for( i=0; i< diagrams.length; i++ ) {
var d = diagrams[i];
d.height= maxHeight -5;
}
};
}
</script>
```

I see a lot of people strugling with the resizing of pictures even though it's simple.
Surprisingly you just have to go to : Plug-in > Kanji Colorizer > Config/Settings and change the "image-size" fields to what you want.
Don't forget to restart Anki for changes to take effect.

First, placed diagrams into a div.
```
<div class="diagram-div">
{{Diagram}}
</div>
```
Then changed width of the images in this div.
```
.diagram-div > img {
width: 40%;
margin: auto;
}
```
I hope it helps.









This is how I force the stroke order diagram to a smaller size on my screen. (The smaller the rectangle the smaller the diagram - probably not the most elegant method, but works for me.)
<center><div id='rectangle' style='width:120px; height:120px; border-style:solid; border-color:white'>{{Diagram}}</div></center>








I seem to have a problem, however. I use this add-on for my RTK deck and it seems to randomly create diagrams for some of the Kanji and not for others. The ones left alone are not necessarily very difficult or rare Kanji. For example, 池 is left un-diagramed.
Maybe because RTK contains some rarer Kanjis the code encounters one of them mid-way and decides to stop rather than just ignoring it?


Whoever spent all this time on this, THANK YOU, it's working wonders.


The bug reported below in 2014 that causes error messages and "Waiting for editing to finish/Resume Now" over and over, is still there. Here is the full error message. The way to cause this error is to start studying your card deck, and get to a card containing a colorized kanji, then clicking Edit and then Done and it will happen.
An error occurred. It may have been caused by a harmless bug,
or your deck may have a problem.
To confirm it's not a problem with your deck, please run Tools > Check Database.
If that doesn't fix the problem, please copy the following
into a bug report:
Traceback (most recent call last):
File "aqt/progress.pyc", line 69, in handler
File "aqt/editor.pyc", line 468, in onUpdate
File "aqt/editor.pyc", line 540, in loadNote
AttributeError: 'NoneType' object has no attribute 'media'

It's the best addon for kanji learners! Thank you sooooo much!

It took me a long time to realize that the stroke numbers are located at the start of the stroke, NOT where they fit, allowing you to figure out the stroke direction. I bet I'm not the only one.
Diagrams don't show up in the browser? This worked for me:
Go to addons>kanji_colorizer>edit
find <img src="%s"> in the code near the bottom
add right in front of it so it becomes <img src="%s">
leave rest untouched
re-generate diagrams

It's been almost 2.5 years since this plugin's KanjiVG dataset was updated, so here's how to easily update it.
1. Download https://github.com/KanjiVG/kanjivg/archive/master.zip
2. Replace your installation's [User]/Documents/Anki/addons/kanjicolorizer/data/kanjivg with the archive's kanjivg-master/kanji (while Anki is closed ofc)
3. Regenerate your diagrams as necessary.
That last step caused the plugin to generate thousands of new '* (1).svg' files for me rather than just overwrite the old ones, so if you have a separate field for the diagrams, it's probably better to wipe it (using a regular expression like (?s).* in S&R explained below) before regenerating.
If it still happens and you want it clean:
1. Use a renamer like krename ("overwrite existing" toggled in its 2nd tab, and just " (1)" in a Search&Replace entry on the 4th one) on the affected files in Anki/Main/collection.media
2. Select all cards with diagrams on them in Anki's card browser
3. Open Search&Replace (C-Alt-F), search for eg. " (1).svg" to be replaced with ".svg" and select the appropriate field(s).
Anyway, it's worthwhile to use Anki's "Tools → Check media" afterward.

The best supply to a Heisig TRK deck I've ever stumbled upon. A must-have for anyone who plans on studying the kanji seriously. Aids the whole of the mnemonic process greatly.

I have been having some strange behavior with this addon - see below:-
I get this repeatedly when editing especially the Expression field.
The screen goes to the "Wait for editing to finish" page but clicking on
Resume Now takes me back to the same page in a loop. If I sync I get
this message:-
Traceback (most recent call last):
File "aqt/progress.pyc", line 69, in handler
File "aqt/editor.pyc", line 466, in onUpdate
File "aqt/editor.pyc", line 538, in loadNote
AttributeError: 'NoneType' object has no attribute 'media'
If I then run Check Database I get:-
Traceback (most recent call last):
File "aqt/main.pyc", line 924, in onCheckDB
AttributeError: 'NoneType' object has no attribute 'fixIntegrity'
If I Check Database without prior sync I just stay in the loop.
If I Quit I get this message:-
Traceback (most recent call last):
File "aqt/progress.pyc", line 69, in handler
File "aqt/editor.pyc", line 466, in onUpdate
File "aqt/editor.pyc", line 538, in loadNote
AttributeError: 'NoneType' object has no attribute 'media'

I generated diagrams for my HSK Chinese deck with it, and out of 5001 cards, 4366 now have a diagram! Admittedly, I'm not sure what percentage of two character words have both diagrams, but still, this is awesome!
Thanks a lot!

Someone made a visual guide on how to use this here:
http://maestoso.org/2014/06/study-japanese-with-anki-part-5/

I knew this addon for a long time but I didn't installed it becouse of KanjiStrokeOrder font.
Now that I have seen the new functionality to colorize by blocks and I gave it a try. It is awesome, specially if studing the kanji following the heisig's method. Thank you very much. This way is quicker to check the correct stroke order.
I thouht this addon only generates diagrams from the kanji jis x 208 character set. But funny stats are that it also generates 28 from jis x 212 and 8 more from jis x 213 only character set.

All of a sudden the diagrams are no longer regenerated.
I had a "Diagram" field with a value of "Japanese" (without) the quotes, in my model.
I also had a "Kanji" field with the Kanji characters.
After clicking the "Kanji Colorizer: re(generate) all" from the Tools menu,
the diagrams/Kanji stroke orders are not showing still.
It worked after adding some, but has stopped working since.
Any help?

Wanted to complain about the program returning errors for unknown unicode characters but it was already fixed in the meantime... Works like a charm, thank you!

But we are warned it's a big file. I tried to install it several times and I thought Anki crashed, but I gave it a little more time and it worked eventually.

It works perfect and has been made chinese compatible (as much as possible) on request.
The colorized Kanjis are so good to remember. Thank you.

This plugin obviously save time when entering a new kanji, but it also saves time during revisions: before that I used animations to learn the stroke order of a kanji, but I lost a lot of time to wait for the animation gets to the stroke that I wanted to check.
Attention, there is a small error in the manual: the field must be called diagram without the letter s.