An e laborate LaTeX diagram

[pgeipi10]

I designed an elaborate diagram illustrating the mechanics of matrix multiplication. I did it in Scientific Workplace. In that application, it renders it to my liking, but KaTeX interprets it differently with arrows and labels outside the matrices rendering in the wrong locations. Any suggestions for correcting this without redesigning the whole thing?

SWP:

KaTeX:

Code:

\begin{equation}%
\begin{array}
[c]{r}%
\begin{array}
[c]{r}%
j\hspace{0.4in}\\
\downarrow\hspace{0.4in}%
\end{array}
\\%
\begin{array}
[c]{c}%
%TCIMACRO{\TeXButton{s}{\phantom{\square}}}%
%BeginExpansion
\phantom{\square}%
%EndExpansion
\\%
%TCIMACRO{\TeXButton{s}{\phantom{\square}}}%
%BeginExpansion
\phantom{\square}%
%EndExpansion
i\rightarrow\\%
%TCIMACRO{\TeXButton{s}{\phantom{\square}}}%
%BeginExpansion
\phantom{\square}%
%EndExpansion
\\%
%TCIMACRO{\TeXButton{s}{\phantom{\square}}}%
%BeginExpansion
\phantom{\square}%
%EndExpansion
\\%
%TCIMACRO{\TeXButton{s}{\phantom{\square}}}%
%BeginExpansion
\phantom{\square}%
%EndExpansion
\end{array}
\hspace{-0.1in}\left[
\begin{array}
[c]{ccc}%
\square & \square & \square\\
\square & C_{ij} & \square\\
\square & \square & \square\\
\square & \square & \square\\
\square & \square & \square
\end{array}
\right]
\end{array}
=\hspace{-0.1in}%
\begin{array}
[c]{r}%
\begin{array}
[c]{ccc}
&  & \\
&  &
\end{array}
\\%
\begin{array}
[c]{c}%
%TCIMACRO{\TeXButton{s}{\phantom{\square}}}%
%BeginExpansion
\phantom{\square}%
%EndExpansion
\\%
%TCIMACRO{\TeXButton{s}{\phantom{\square}}}%
%BeginExpansion
\phantom{\square}%
%EndExpansion
i\rightarrow\\%
%TCIMACRO{\TeXButton{s}{\phantom{\square}}}%
%BeginExpansion
\phantom{\square}%
%EndExpansion
\\%
%TCIMACRO{\TeXButton{s}{\phantom{\square}}}%
%BeginExpansion
\phantom{\square}%
%EndExpansion
\\%
%TCIMACRO{\TeXButton{s}{\phantom{\square}}}%
%BeginExpansion
\phantom{\square}%
%EndExpansion
\end{array}
\hspace{-0.1in}\left[
\begin{array}
[c]{cccc}%
\square & \square & \square & \square\\
\blacksquare & A_{ik} & \blacksquare & \blacksquare\\
\square & \square & \square & \square\\
\square & \square & \square & \square\\
\square & \square & \square & \square
\end{array}
\right]
\end{array}
\hspace{-0.1in}%
\begin{array}
[c]{r}%
\begin{array}
[c]{r}%
j\hspace{0.42in}\\
\downarrow\hspace{0.42in}%
\end{array}
\\
\left[
\begin{array}
[c]{ccc}%
\square & \blacksquare & \square\\
\square & B_{kj} & \square\\
\square & \blacksquare & \square\\
\square & \blacksquare & \square
\end{array}
\right]  \\
\\
\end{array}
\end{equation}

[edemaine]

It looks like there's something wrong with your specific KaTeX environment/setup. The code works well on the demo:

I just removed the vertical alignment arguments to \begin{align}, which aren't yet supported in KaTeX. (See #3190.)

\begin{equation}%
\begin{array}{r}%
\begin{array}{r}%
j\hspace{0.4in}\\
\downarrow\hspace{0.4in}%
\end{array}
\\%
\begin{array}{c}%
%TCIMACRO{\TeXButton{s}{\phantom{\square}}}%
%BeginExpansion
\phantom{\square}%
%EndExpansion
\\%
%TCIMACRO{\TeXButton{s}{\phantom{\square}}}%
%BeginExpansion
\phantom{\square}%
%EndExpansion
i\rightarrow\\%
%TCIMACRO{\TeXButton{s}{\phantom{\square}}}%
%BeginExpansion
\phantom{\square}%
%EndExpansion
\\%
%TCIMACRO{\TeXButton{s}{\phantom{\square}}}%
%BeginExpansion
\phantom{\square}%
%EndExpansion
\\%
%TCIMACRO{\TeXButton{s}{\phantom{\square}}}%
%BeginExpansion
\phantom{\square}%
%EndExpansion
\end{array}
\hspace{-0.1in}\left[
\begin{array}{ccc}%
\square & \square & \square\\
\square & C_{ij} & \square\\
\square & \square & \square\\
\square & \square & \square\\
\square & \square & \square
\end{array}
\right]
\end{array}
=\hspace{-0.1in}%
\begin{array}{r}%
\begin{array}{ccc}
&  & \\
&  &
\end{array}
\\%
\begin{array}{c}%
%TCIMACRO{\TeXButton{s}{\phantom{\square}}}%
%BeginExpansion
\phantom{\square}%
%EndExpansion
\\%
%TCIMACRO{\TeXButton{s}{\phantom{\square}}}%
%BeginExpansion
\phantom{\square}%
%EndExpansion
i\rightarrow\\%
%TCIMACRO{\TeXButton{s}{\phantom{\square}}}%
%BeginExpansion
\phantom{\square}%
%EndExpansion
\\%
%TCIMACRO{\TeXButton{s}{\phantom{\square}}}%
%BeginExpansion
\phantom{\square}%
%EndExpansion
\\%
%TCIMACRO{\TeXButton{s}{\phantom{\square}}}%
%BeginExpansion
\phantom{\square}%
%EndExpansion
\end{array}
\hspace{-0.1in}\left[
\begin{array}{cccc}%
\square & \square & \square & \square\\
\blacksquare & A_{ik} & \blacksquare & \blacksquare\\
\square & \square & \square & \square\\
\square & \square & \square & \square\\
\square & \square & \square & \square
\end{array}
\right]
\end{array}
\hspace{-0.1in}%
\begin{array}{r}%
\begin{array}{r}%
j\hspace{0.42in}\\
\downarrow\hspace{0.42in}%
\end{array}
\\
\left[
\begin{array}{ccc}%
\square & \blacksquare & \square\\
\square & B_{kj} & \square\\
\square & \blacksquare & \square\\
\square & \blacksquare & \square
\end{array}
\right]  \\
\\
\end{array}
\end{equation}

[pgeipi10]

Perfect!

For some reason, I'm not able to "Mark as answer" your comment. Nothing happens when I click the button.

[edemaine]

Glad it's working!

This seems to be a bug in GitHub: community/community#5242
Meanwhile, I've marked it for you.