[Userscript] Stroke Order Diagram

@Kumirei That one at least should be pretty easy to fix:

  • @require newest version of Item Info Injector
  • @match for entire WaniKani page
  • Done
New suggested script header
// ==UserScript==
// @name        WaniKani Stroke Order
// @namespace   japanese
// @version     1.1.19
// @description Shows a kanji's stroke order on its page and during lessons and reviews.
// @license     GPL version 3 or any later version; http://www.gnu.org/copyleft/gpl.html
// @match       https://www.wanikani.com/*
// @match       https://preview.wanikani.com/*
// @author      Looki, maintained by Kumirei
// @grant       GM_xmlhttpRequest
// @connect     jisho.org
// @connect     cloudfront.net
// @require     https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js
// @require     https://greasyfork.org/scripts/430565-wanikani-item-info-injector/code/WaniKani%20Item%20Info%20Injector.user.js?version=1166918

// ==/UserScript==

I think since I “took over maintenance” you have made every single change to the script sweat_smile Thanks!


Hi! Thanks so much for keeping this up to date. I find this script super helpful on my laptop, but I can’t seem to get it working on my iPad using the userscript app on iOS safari. With the current version, when I have that script installed, I can’t even load the radical or kanji pages; the browser will just not load the page. Then I’ll delete the script and it will work normally. Is there any easy way to get this working?


So, whenever a kanji has exactly 10 strokes, it creates the second row of the grid anyway.

The wrapping at >10 strokes is really useful, this one thing just needs to be fixed. I did this locally by changing line 116 to var rowCount = Math.floor((allPaths.length - 1)/ framesPerRow) + 1.

1 Like

Thanks, I’ll take a closer look at this and get it fixed next week (if I can find the time)

1 Like

Just a heads up, Item Info Injector just got an update (supports Recent Mistakes now + some other bug fixes), so when you get around to the above you should probably also change the @require to the latest version of that.


I have added your change for the wrapping and updated the info injector. Thank you!

1 Like

Is this not working for anyone else? It seems you recently updated this but it’s not working for me on Chrome (PC, Windows 10.) I don’t get stroke order anywhere neither on Lessons nor Reviews. It’s enabled and I tried putting it as #2 on the UserScripts order, 2nd to the Open Framework script and I still don’t get anything. Anyway to go about troubleshooting this?

1 Like

First make sure you’re on the latest version (it sounds like you are though, but always good to double check). Try going to the item page of a kanji and open the browser console (F12, then Console tab) and if stroke order doesn’t show up report any errors you see there (errors will be red; I haven’t looked at Chrome in a while but like Firefox there should be a way to filter it so it only shows errors if you can find it).

1 Like

Hi Lupo. It works now after closing Chrome and restarting my PC.

Thanks for the swift reply.


Hello, the stroke order doesn’t show up for me when doing lessons, only on the specific kanji pages. I’ve tried reinstalling and it still won’t show up. It’s my first time using userscripts, what should I do?

You have two options. Go to the thread for Item Info Injector and install that script separately and place it above Stroke Order Diagram in execution order (before any scripts that need it actually, I recommend right after Open Framework if you have that which should be #1, otherwise make Info Injector #1); OR go into the Stroke Order Diagram script’s code, and replace the line in the section at the top that starts with @require with the string from the Info Injector thread (in the main post, and also the latest comment).

If you go with the second method, please note that your script manager may disable automatic updating of the Stroke Order Diagram script because local changes were made (this is true for at least Tampermonkey). You should be able to re-enable the updates after.

I recommend the first option though because you won’t be stuck waiting on a script to update its @require when Info Injector gets updated; you will instead always have the latest version of Info Injector and that will supersede the @requires in any scripts that use Info Injector.

The first method worked! Thanks so much!!

I’ve just tried adding Info Injector as well as modifying the userscript with that @require to no avail :frowning:. I see no relevant errors in the console either

You shouldn’t have to do the modification of the @require currently, the current script version (1.1.21) has the correct one. Which means if it’s not working for you, there is some other problem. Can you provide the page of the kanji you were looking at?

1 Like

Oh, if I go to specific kanji pages, it does work; it’s reviews and lessons where it doesn’t show like in the picture of the first post.

The picture in the first post is also an item page, not the lesson/review page. But it should be working those places too. When you next do a kanji lesson or get a kanji in review, can you share a screenshot showing that it is not there and also one of the browser console?

Sure thing.

Oh, nevermind, it worked! I was getting confused between kanji readings and vocuabulary for raw kanjis, but I got one today and it took a bit but it generated the stroke order. Thanks!

Anyone know why this doesn’t work for me in recent-mistakes lessons? It looks like it has the latest Info Injector version, so it should work…