Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion src/content/blog-metas/2024-12-21-mermaid-to-pdf.json
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
{
"postDate": "2024-12-22T08:18:17.106Z"
"postDate": "2024-12-22T08:18:17.106Z",
"updateDate": "2024-12-23T13:24:42.943Z"
}
16 changes: 11 additions & 5 deletions src/content/blogs/2024-12-21-Mermaid-to-pdf.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -18,12 +18,18 @@ import svg from '2024-12-21-Mermaid-to-pdf/sample.svg'

この記事は[OUCC Advent Calendar 2024](https://adventar.org/calendars/10655)の21日目の記事です。

## 追記
[mermaid-cli](https://github.com/mermaid-js/mermaid-cli)を使って、
```bash
mmdc --pdfFit -i input.mmd -o output.pdf
```
で行けました。
[みやじ](https://oucc.org/blog/authors/miyaji/)さんに教えていただきました。ありがとうございます。

## 記事作成後の気づき
[SVGからPDFへの変換はHeadless Chromeでやろう(と思ったけどやっぱりrsvg-convertでやろう)](https://qiita.com/s417-lama/items/747be70c35204d4e1b39#headless-chrome)の最後にも書いてありましたが、Headless Chromeを使うと、ラスタ画像になっていました。~~(ちゃんと読んでないのが悪い)~~ これでは、この記事の目的は達成できていません。(ラスター画像なら、[mermaid-cli](https://github.com/mermaid-js/mermaid-cli)で作成できる。)
→svgファイルをいじって、ほかの方法で文字が表示されるようにするしかない?

ほかの方法で変換できれば記事を更新します。

---

試した手法とその結果も載せています。
Expand Down Expand Up @@ -71,9 +77,9 @@ Mermaidのみを、ファイルに書き、[mermaid-cli](https://github.com/merm
<details>
<summary>サンプル</summary>

Mermaidファイルの記述
Mermaidファイル(sample.mmd)の記述

```sample.mmd
```mermaid
graph TD
a-->b
a-->c
Expand All @@ -82,7 +88,7 @@ c-->e
d-->e
```

Mermaid
sample.mmdの出力内容
<Image src={svg} alt=""/>

PDF
Expand Down