Memo/Mermaid

Mermaid記法: テキストでフローチャートや図を書く
- 文字被りの解消
- mermaid-cli: svg/png/pdfに変換

Mermaid記法: テキストでフローチャートや図を書く †

https://mermaid.js.org/
GitHub Markdownや、VS CodeのPreviewでテキストを書きながらライブプレビューで確認できる。

mermaid記法:

```mermaid
info
```

Architecture Diagrams Documentation (v11.1.0+) | Mermaid ネットワーク図やアイコン等がサポートされた。AWSアイコンは表示されず(v11.4.1)

記事:

その他の選択肢。AWSアイコン等を使いたいなど

Memo/draw.io draw.io + VSCode
Memo/PlantUML#nd99af1d PlantUML + VSCode

↑

文字被りの解消 †

問題:

subgraph の説明が長いと、その中のリソースの枠が上に被って文字が読めなくなる。(VS Codeのpreviewで発生。GitHubだと問題ない。)
```
flowchart LR
    subgraph VPC1["VPC1: VPCの長い説明aaaaaaaaaaaaaaaaaaaaaabbbbbbbbbbbbbbbb"]
        EC2["ec2の説明"]
    end
```

解決1:

subGraphTitleMarginで、bottomの隙間を開ける。

%%{init: {'flowchart': {'subGraphTitleMargin': {'top': 0, 'bottom': 35}}}}%%
flowchart LR
...

subGraphTitleMargin

↑

mermaid-cli: svg/png/pdfに変換 †

GitHub - mermaid-js/mermaid-cli at 10.1.0
- npmでインストールかdocker
- .mdを渡しても動作した。

dockerを使う場合。local環境が汚れなくて良い

docker pull minlag/mermaid-cli

# .pngへ変換
docker run --rm -u `id -u`:`id -g` -v $PWD:/data minlag/mermaid-cli -i README.md -o README.png

連絡先

TreeView

Memo (726)
- 2FA-MFA
- ACDSee
- ASP
- ASP.NET
- Adobe
- Affiliate
- Aipo
- Akelos (3)
  - sample (2)
    - ajax
    - pref
- Algorithm (1)
  - image
- Aliyun (1)
  - cli
- AmazonWebServices (88)
  - ACM
  - APIGateway
  - Alexa
  - Athena (2)
    - CloudTrail
    - Example
  - Backup
  - Batch
  - Bedrock
  - Billing
  - CDK
  - Chatbot
  - CloudFormation
  - CloudFront
  - CloudSearch
  - CloudTrail
  - CloudWatch
  - CodeBuild
  - CodeCommit
  - CodeDeploy
  - CodePipeline
  - Configservice
  - Connect
  - DataPipeline
  - Detective
  - DirectConnect
  - DirectoryService
  - DocumentDB
  - DynamoDB
  - EC2 (5)
    - AMI
    - DLM
    - EBS
    - ec2-metadata-mock
    - mock-ec2-metadata
  - EC2-classic
  - ECR
  - ECS
  - EKS
  - ELB
  - EMR
  - ElastiCache
  - ElasticBeanstalk
  - Fargate
  - FireLens
  - Glacier
  - Glue
  - GuardDuty
  - Health
  - IAM
  - IPv6
  - IoT
  - KinesisDataFirehose
  - Lambda
  - OpenSearch(Elasticsearch)
  - Organizations
  - QuickSight
  - R53
  - RDS (1)
    - Aurora
  - Route53
  - S3
  - SDB
  - SDK (1)
    - Python
  - SES
  - SNS
  - SSO
  - SecretsManager
  - SystemsManager
  - VPC (1)
    - TransitGateway
  - VPN
  - WAF
  - aws-vault
  - awscli (12)
    - CloudWatch
    - DynamoDB
    - EC2
    - RDS
    - S3
    - backup
    - ce
    - elb
    - error
    - parallel
    - route53
    - v2
- Amazon_Dash_Button
- Amazon_Fire_TV_Stick
- Amazon_Fire_Tablet
- Android (16)
  - AIR
  - ASUS_EeePad_Transformer
  - ASUS_Nexus7
  - ASUS_ZenFone_Max_Pro_M1
  - GALAXY_Tab
  - HTC_Butterfly_s
  - HTC_Desire
  - HTC_Desire_HD
  - HTC_Desire_Z
  - HTC_HT-03A
  - Lenovo_Legion_Y700_2023
  - Lenovo_Xiaoxin_Pad_Pro_GT_2025
  - SHARP_AQUOS_sense4_lite
  - adk
  - app
  - sdk
- Ansible (20)
  - AWS
  - AWX
  - Error
  - Facts
  - Filters
  - Galaxy
  - Install
  - Jinja2
  - Lookups
  - Loops
  - Tower
  - Troubleshooting
  - Validation
  - Variables
  - Vault
  - Windows
  - ldap
  - local_action
  - module_development
  - set_fact
- AppleTV
- Arduino
- ArtificialIntelligence (3)
  - LLM (1)
    - ClaudeCode
  - MachineLearning
- Atlassian
- AugmentedReality
- Azure
- BBS
- Backlog
- Bazaar
- Becky
- Blog
- Blynk
- Browser
- C
- C++
- CDN
- CSS
- ChaosEngineering
- CircleCI
- CloudComputing
- Cloudflare
- ComputerSecurity
- Consul
- Creative
- DNS
- DTM
- Database (1)
  - ツリー(階層)構造の設計
- Datadog
- Docker (4)
  - Dockerfile
  - Kubernetes
  - k3s
  - nomad
- Doxygen
- Dropbox
- DuckDB
- E-book (4)
  - BOOKSCAN
  - Calibre
  - NOOK
  - edit
- EC-CUBE
- EOL
- Electron
- English
- EstimateTechnique
- Evernote
- Excel
- F-PLUG
- F-Secure_PSB
- FFmpeg
- Fabric
- Filer
- Flash (1)
  - Lite
- Flex
- Fonts
- FreeWLAN
- GIS
- Gainer
- Game
- GameDev
- Geolocation
- GlusterFS
- Google (11)
  - AdSense
  - Apps_Script
  - Docs
  - Drive
  - Form
  - Gemini
  - Gmail
  - NotebookLM
  - SpreadSheet
  - Workspace
  - reCAPTCHA
- GoogleCloudPlatform
- Google_Chromecast
- Gradle
- Grafana (11)
  - API
  - Athena
  - CloudWatch
  - GoogleBigQuery
  - Loki
  - Troubleshooting
  - Zabbix
  - docker
  - git-sync
  - grafana-image-renderer
  - plugins
- GraphQL
- Graphics
- Graphviz
- HTML (1)
  - 5
- Heroku (2)
  - Papertrail
  - herokucli
- IPTV
- IPv6
- ImageProcessing
- InfoPath (1)
  - JScript
- IntelliJ_IDEA
- IoT
- JAWBONE_UP
- Java (8)
  - Eclipse (1)
    - Cray
  - Eclipse3.1でiアプリ開発
  - Maven
  - Tomcat
  - log4j
  - 携帯 (1)
    - サンプル
- JavaScript (1)
  - jq
- Jenkins
- Jujutsu
- JupyterNotebook
- KVM_Switch
- LVGL
- LXC
- LibreOffice
- LifeHacks
- Linux (141)
  - AlmaLinux (2)
    - 10
    - 9
  - AntiVirus
  - Apache
  - Archiver
  - Bash
  - BitTorrent
  - CVS
  - CentOS (5)
    - 5
    - 6
    - 7
    - 8
    - Stream
  - CentOS4
  - Chrony
  - ClamAV
  - Disk
  - Dragonfly
  - Duplicity
  - Fedora core 1
  - Fedora core 5 (2)
    - VMware server
    - samba3.0
  - Firecracker
  - Fluent-Bit
  - Fluentd(td-agent) (1)
    - Errors
  - Heartbeat
  - HyperEstraier
  - InitScript
  - LVM
  - LVS
  - Linuxbrew
  - LiteSpeed
  - Mailman
  - Makefile
  - Memcached
  - Monit
  - Monitoring
  - Munin
  - Namazu
  - NetBox
  - OSS-license
  - OpenLDAP (1)
    - WebUI
  - OpenResty
  - Pacemaker
  - Redhat Enterprise Linux ES3
  - Redhat Enterprise Linux ES4
  - SC420 (6)
    - MySQL5.0
    - PostgreSQL8.0
    - Subversion
    - eAccelerator0.9.3
    - php5.0
    - 外部公開(DMZ)
  - SELinux
  - SSL
  - ShellScript
  - Vyatta
  - WebCamera
  - Zabbix (15)
    - 1.8jp
    - 2.0
    - 2.2
    - 2.4
    - 3.0
    - 4.0
    - 5.0
    - 6.0
    - 7.0
    - API
    - AWS
    - Error
    - Slack
    - Template
    - docker
  - ag
  - anyenv
  - audit
  - cloud-init
  - comm
  - command
  - curl
  - datetime
  - denyhosts
  - diff
  - dnf
  - dnsmasq
  - fail2ban
  - find
  - firewalld
  - fzf
  - grep
  - haproxy
  - iptables
  - jailkit
  - jc
  - less
  - lftp
  - logrotate
  - lsof
  - mail
  - mdadm
  - nftables
  - nginx
  - ntp
  - parallel
  - pdsh
  - peco
  - postfix
  - pure-ftpd
  - rclone
  - rdiff-backup
  - redis
  - resolv.conf
  - rootsh
  - rpm
  - rsync
  - samba
  - servicelist
  - socat
  - source-highlight
  - ss
  - ssh
  - sudo
  - symlink
  - syslog
  - systemd
  - taRgrey
  - tcpflow
  - tmux
  - vim
  - vsftpd
  - webdruid
  - wget
  - xargs
  - yum
  - zphoto
- Lua
- MSOffice
- MacOS X (2)
  - Homebrew
  - app
- MariaDB
- Markdown
- MemoApp
- Mermaid
- MessagePack
- MicrosoftTeams
- MicrosoftVisualStudio
- MongoDB
- Movie
- Mp3tag
- MySQL (5)
  - 5.5
  - 5.7
  - 8.0
  - Error
  - docker
- NETGEAR_ReadyNAS
- NLP
- NetworkNotepad
- NoSQL
- Node.js
- Notion
- OCR
- ODROID
- OSRM
- OSSEC
- OpenOfficeOrg
- OpenTofu
- OpenVPN
- OpenWrt (7)
  - Buffalo_WSR-2533DHP
  - ELECOM_WRC-X3200GST3
  - Package (4)
    - adblock
    - ddns
    - luci
    - openvpn
- Opera
- Oracle
- PC
- PC98
- PDF
- PHP (35)
  - Bug
  - CakePHP
  - Composer
  - Excelファイル生成
  - Google
  - PEAR (11)
    - Auth
    - Cache_Lite
    - DB
    - DB_DataObject
    - File_Archive
    - HTML_QuickForm
    - MDB2
    - QuickForm
    - SQLite
    - Services_Amazon
    - session_pgsql
  - PECL (1)
    - oauth
  - PHP Accelerator
  - SOAP
  - Smarty
  - XML_RPC
  - Xdebug
  - eAccelerator (1)
    - CentOS5.2
  - log4php
  - phpでSSL通信
  - qdmail
  - rss
  - simpletest
  - wkhtmltox
  - xhprof
  - フレームワーク
  - ベンチマーク
- PSP
- PT2 (2)
  - CentOS
  - Ubuntu
- Packer
- Parquet
- PayPal
- Perl (1)
  - OneLiner
- PhantomJS
- Photoshop
- PlantUML
- Playwright
- Poderosa
- Podman
- PostgreSQL (3)
  - constraint
  - pgpool
  - pgpool-II
- PowerPoint
- Programming
- Prometheus
- Puppet (5)
  - Geppetto
  - hiera
  - v3.x
  - v5.x
  - v8
- Python (8)
  - AWS
  - Error
  - Poetry
  - install
  - luigi
  - pip
  - test
  - uv
- QRCode
- RADIUS
- REST_API
- RFID
- RabbitMQ
- Rackspace
- Raspberry_Pi (3)
  - ANAVI_Infrared_pHAT
  - DNSB-35137
  - co2
- RecordingServer
- Redash
- Redmine
- RegularExpression
- Rlogin
- Ruby (1)
  - Rails
- Rundeck
- Rust
- SQL
- SQLite
- SSO
- SakuraEditor
- SendGrid
- Server
- Skype
- Slack
- SoftEther (1)
  - Raspberry_Pi
- Solaris
- Stashboard
- Subversion (6)
  - Install
  - trac (4)
- SwitchBot
- Tailscale
- Taskfile
- Tauri
- Terraform (13)
  - Error
  - G_Suite
  - GitHub
  - GoogleCloud
  - aliyun
  - aws (1)
    - Errors
  - dynamic-block
  - for_each
  - heroku
  - legacy
  - provider
  - random
- ThinkPad
- Trac
- Traefik
- TrendMicroDeepSecurity
- Twitter
- TypeScript
- USB-IO
- Ubuntu (1)
  - Error
- Unity
- VMware
- VOCALOID
- Vagrant (4)
  - Errors
  - Windows
  - box
  - macOS
- VictoriaMetrics
- VirtualBox
- Visio
- VisualStudioCode (1)
  - AWS
- VxWorks
- WebBrowser (5)
  - Chrome
  - Chromium
  - Firefox (1)
    - PreBar
  - Vivaldi
- Wiki (4)
  - BlockingSpam
  - dev
  - docker
  - 広告
- Windows (31)
  - .NET_Framework
  - 10 (14)
    - WSL (13)
      - 2
      - 3
      - AlmaLinux
      - CentOS
      - Docker
      - Install
      - Ubuntu
      - ssh-agent-wsl
      - wsl-ssh-agent
      - wsl-terminal
      - wsl2-ssh-agent
      - wslgit
      - wsltty
  - 11
  - 7
  - 8
  - ATOK
  - BatchFile
  - EventLog
  - Firewall
  - PackageManagement
  - PowerShell
  - Store
  - VirtualPC
  - WSA
  - WindowsTerminal
  - winget
  - エラー
- WindowsMobile (3)
  - Link
  - Software
  - ssh
- Wireshark
- Word
- WordPress
- XBMC (2)
  - CentOS
  - Ubuntu
- Xamarin
- YAMAHA-RTX
- antivirus
- backup (1)
  - AcronisTrueImage
- company
- containerd
- csvtsv
- dd-wrt (7)
  - Buffalo_WHR-G301N
  - Buffalo_WXR-1900DHP
  - Buffalo_WZR-1166DHP
  - Buffalo_WZR-1750DHP
  - Buffalo_WZR-D1800H
  - Buffalo_WZR-HP-AG300H
  - Buffalo_WZR-HP-G300NH
- draw.io
- facebook
- favorite
- git (5)
  - Bitbucket
  - GitHub (3)
    - Actions (2)
      - AWS
      - act
- golang
- iPhone (2)
  - app
  - sdk
- iPod
- jQuery
- keepass
- localstack
- mbed
- mise
- mobile
- pandoc
- printer
- programmer
- serverspec
- soracom
- spam
- telework
- twilio
- web
- wkhtmltopdf
- yaml (1)
  - yq
- ユーザビリティ
- 個人情報保護法
- 航空機用語
- 就職
- 設計開発
- 素材集
- 相続
- 投資
- 用語
- FrontPage
  - - instag.inc.php

Mermaid記法: テキストでフローチャートや図を書く †

文字被りの解消 †

mermaid-cli: svg/png/pdfに変換 †

Software

Programming

Game

雑記

連絡先

TreeView

人気の10件

最新の10件