タグ

JavaScriptとExcalidrawに関するdiet55のブックマーク (2)

  • ObsidianでmermaidをSVGに変換する - Jazzと読書の日々

    やはり書いてみるものだなあ。 Mermaid さっき「Obsidianではどうするのだろう」と書いたら、少しして閃きました。 無意識コンピュータが計算してくれたみたい。 便利にできている。 mm2svg.md 下記のTemplaterスクリプトになります。 <%* mermaid.initialize({startOnLoad: true}) const s = await mermaid.render('id01', tp.file.content) new Notice("convert SVG to clipboard") navigator.clipboard.writeText(s) %> 書いてしまえば簡単。 使い方 mermaidの中身だけテキストに書きmm2svgを実行。 クリップボードにSVGファイルが保存されます。 Excalidrawに貼りつければ完成。 無意識コンピ

    ObsidianでmermaidをSVGに変換する - Jazzと読書の日々
    diet55
    diet55 2023/08/14
    なるほど。手段はあるのですね。/だめだ。頭がバカになっている。MermaidはJavaScriptのライブラリなのだから、扱う手段がありそうなのは当たり前か。不勉強。勉強になるなー。 mermaid.render()。 https://mermaid.js.org/config/usage.html
  • 意図的に雑な図形をコードで描く

    描画ライブラリを使える環境ならば、たとえば円を描くのに書くコードは一行で済むだろう。ただ、コード一行でほぼ完全な真円を描いてもなにかつまらない。そこであえて意図的に雑な図形をコードで描きたいと考えて試行錯誤した結果、ある程度満足するところまでいったのでその技法について解説を行う。 意図的に雑な線を描く まずは雑な線をコードで表現するために、実際に適当な線を何度も描いてみて特徴を探してみる。そうすると下記のような特徴が現れた。 始点と終点の位置が多少バラける 途中から位置が上下にずれているのに気づきそれを元の位置に直そうとする 上記の内容を3次ベジェ曲線程度で表現するために色々と試行錯誤した結果、下記の手順になった。 始点と終点を用意する 始点から終点までの20%〜40%の地点に点を置く 更に上記の倍の地点に点を置く 4つの点を少しずらす 4つの点をもとに3次ベジェ曲線を描く 以前、Twit

    意図的に雑な図形をコードで描く
  • 1