はてなブログでTikZが利用できる，TikZjaxなるものがあるので紹介します。
実際に動かしているサイトはこちら
設定
Markdown記法なら，以下をそのまま文末にでも書いておきます。
<link rel="stylesheet" type="text/css" href="https://tikzjax.com/v1/fonts.css">
<script src="https://tikzjax.com/v1/tikzjax.js"></script>
描き方
<script>の中にtikzpicture環境を書きます。
<script type="text/tikz">
\begin{tikzpicture}
\draw (0,0) circle (3cm);
\end{tikzpicture}
</script>
見たまま編集の場合は，HTMLから編集をする。
<script type="text/tikz">
\begin{tikzpicture}
\draw[thick] (0,0) -- (6,1);
\coordinate (O) at (0,0);
\node[below] at (O) {O};
\end{tikzpicture}
</script>
コンパイルに一瞬時間がかかりますが，このように表示されます。
注意
ライブラリは使えないようです。mathやcalcなどが呼び出せないので，使用にはかなりの制限があります。+, ^などの簡単な計算はできます。sinなどの関数を使うことはできません。
plotも使えません。
\defは使えます。
日本語に対応していないので，後述の\nodeに日本語を記述するとコンパイルしません。
TikZの基本的な使い方
線の描画 \draw
-- to
\drawは線をかくことができます。--あるいはtoは直線をかく命令です。
\begin{tikzpicture}
\draw (0,0) -- (5,0);
\end{tikzpicture}
オプションとして，太さ，色，スタイルなどが指定できます。
\begin{tikzpicture}
\draw[thin] (0,1) -- (5,1);
\draw (0,0) -- (5,0);
\draw[thick] (0,-1) -- (5,-1);
\draw[very thick] (0,-2) -- (5,-2);
\draw[ultra thick] (0,-3) -- (5,-3);
\end{tikzpicture}
\begin{tikzpicture}
\draw[blue] (0,1) -- (5,1);
\draw[red] (0,0) -- (5,0);
\draw[green] (0,-1) -- (5,-1);
\draw[yellow] (0,-2) -- (5,-2);
\draw[gray] (0,-3) -- (5,-3);
\end{tikzpicture}
\begin{tikzpicture}
\draw (0,1) -- (5,1);
\draw[dashed] (0,0) -- (5,0);
\draw[dotted] (0,-1) -- (5,-1);
\end{tikzpicture}
circle
中心の座標を指定して，円をかくことができます。
<script type="text/tikz">
\begin{tikzpicture}
\draw (2,1) circle (2cm);
\end{tikzpicture}
</script>
\drawについてより詳しく
塗りつぶしfill
drawと同じ要領で，fillを使うと塗りつぶしができます。
<script type="text/tikz">
\begin{tikzpicture}
\fill (2,1) circle (2cm);
\end{tikzpicture}
</script>
デフォルトでは塗りつぶしの色は黒です。
fillのオプションで，色，透明度などを指定することができます。
<script type="text/tikz">
\begin{tikzpicture}
\fill[red] (2,1) circle (2cm);
\fill[blue] (5,1) circle (2cm);
\end{tikzpicture}
</script>
点にテキストを入れる node
\node at (座標) {};
\path (座標) node {};の代替命令
\begin{tikzpicture}
\node[below] at (0,0) {O};
\end{tikzpicture}
オプション
位置：above below left right
フォントサイズ：font=\scriptsize (フォントサイズTeXコマンド?)
塗りつぶし：'fill=white' (矩形の背景色)
形の指定がなければ，矩形で塗られる。
nodeに対する余白 'inner sep=0pt'
\begin{tikzpicture}
\def\d{2}
\fill (-\d,0) circle (2pt);
\node at (-\d,0) {nothing};
\fill (0,0) circle (2pt);
\node[above] at (0,0) {above};
\fill (\d,0) circle (2pt);
\node[below] at (\d,0) {below};
\fill (2*\d,0) circle (2pt);
\node[left] at (2*\d,0) {left};
\fill (3*\d,0) circle (2pt);
\node[right] at (3*\d,0) {right};
\fill (4*\d,0) circle (2pt);
\node[above right] at (4*\d,0) {above right};
\end{tikzpicture}
shpaeを指定して fill を入れると次のようになります。
\begin{tikzpicture}
\def\d{2}
\fill (-\d,0) circle (2pt);
\node[above] at (-\d,0) {nothing};
\node[fill=blue,below] at (-\d,0) {fill=blue};
\fill (0,0) circle (2pt);
\node[above] at (0,0) {circle};
\node[fill=blue,below,shape=circle] at (0,0) {fill=blue};
\fill (\d,0) circle (2pt);
\node[above] at (\d,0) {cooridnate};
\node[fill=blue,below,shape=coordinate] at (-\d,0) {fill=blue};
\end{tikzpicture}
回転
\begin{tikzpicture}
\def\d{2}
\fill (0,0) circle (2pt);
\node[above,rotate=30] at (0,0) {rotate=30};
\end{tikzpicture}
nodeについて詳しく
点に名前を付ける coordinate
点に単に名前を付けたい場合に次のようにします。
\coordinate (名前) at (座標);
\node (名前) at (座標) {};を簡略化した命令です。
例えば，
\begin{tikzpicture}
\coordinate (A) at (0,0);
\coordinate (B) at (2,3);
\draw (A) -- (B);
\node[left] at (A) {A};
\node[right] at (B) {B};
\end{tikzpicture}
一度点の名前を定義すると，以降で使用することができます。
tikzの座標は，座標と同時にベクトルとして取り扱うことができます。（calcライブラリー）
3dでかく
単純に3つの座標で表すと，自動で3次元として扱ってくれます。デフォルトの向きは以下の通りです。
\begin{tikzpicture}
\draw[-latex] (0,0,0) -- (5,0,0) node[pos=1.1] {$x$};
\draw[-latex] (0,0,0) -- (0,5,0) node[pos=1.1] {$y$};
\draw[-latex] (0,0,0) -- (0,0,5) node[pos=1.1] {$z$};
\end{tikzpicture}
