本文最后更新于 2024-07-05，文章内容可能已经过时。

大家好，这里是Cherry，喜爱折腾、捡垃圾、玩数码，热衷于分享NAS、docker玩耍经验~

今天，我来分享一些使用docker部署的最佳绘图项目，当然这个绘图也不仅仅是画个画那么简单，而是包含了在线图表、白板、思维导图、爬虫、设计画图、数据库等等，任何可以使用绘图来实现的应用，我都将之归纳在了一起。

为各位程序猿、设计狮们提供一点新的思路，毕竟白嫖大家都喜欢~~

| 一、高人气超多元素的在线图表设计工具——Draw.io

Draw.io，曾用名是Diagramly，是一款高人气的免费在线图表软件。主要应用场景在流程图、网络图、数据库图、ER图、电路图等，支持在线使用。draw.io可以导入.vsdx、Gliffy、Lucidchart文件，拥有大量的形状和数百个视觉元素可供选择，使您的图表或图表独一无二。

在线使用：https://app.diagrams.net/

image.png

🔴项目特性：

  • 一个免费的在线图表软件，用于创建流程图、UML 图、架构图等。
  • 支持多种文件格式，包括 XML、HTML5 和图片格式。
  • 可以与 Google Drive、OneDrive 和其他云存储服务集成。
  • 支持实时协作编辑功能。

🔻自托管部署

version: "3.9"

services:
  drawio:
    container_name: draw
    image: jgraph/drawio
    ports:
      - 8080:8080
      - 8443:8443

| 二、最可爱的手绘风在线白板工具——Excalidraw

Excalidraw是一个手绘风格的轻量级绘图工具，非常适合快速草图和头脑风暴。该软件的所有数据都是保存在你的浏览器中的，所以只要不初始化浏览器，数据可以一直存留。项目支持端对端加密，支持在线协作，

在线使用：https://excalidraw.com/

🔴项目特性：

  • 🎨无限的，基于画布的白板
  • 🌓黑暗模式
  • 📷图像支持
  • 😀形状库支持
  • 🖼️支持导出为 PNG、SVG 或 JSON 格式
  • 💾Open format -将图形导出为 .excalidraw json文件
  • ⚒️广泛的工具-矩形，圆形，菱形，箭头，直线，自由绘制，橡皮擦
  • 🔙取消/重做
  • 🔍缩放和平移支持

🔻自托管部署

version: "3.9"

services:
  excalidraw:
    container_name: excalidraw
    image: excalidraw/excalidraw:latest
    ports:
      - 5000:80
    restart: on-failure:5
    stdin_open: true
    environment:
      - NODE_ENV=development
    volumes:
      - ./:/opt/node_app/app:delegated
      - ./package.json:/opt/node_app/package.json
      - ./yarn.lock:/opt/node_app/yarn.lock
      - notused:/opt/node_app/app/node_modules
      
volumes:
  notused:

| 三、简单纯粹的在线协作型思维导图——TeamMapper

TeamMapper是一个简单的思维导图，您可以创建并创建自己的思维导图，与团队分享思维导图，并在思维导图上进行协作。

在线使用：https://www.teammapper.org/

image.png

🔴项目特性：

创建：主持并创建自己的思维导图
自定义：添加图像、象形图 、颜色、字体属性和节点链接
协作：与朋友和同事分享你的思维导图，使用仅查看或修改邀请！
互操作性：导入和导出功能（JSON，SVG，PDF，PNG.）
可共享性：使用QR码或URL共享
GDPR合规性：默认情况下，思维导图将在30天后删除
可用性：重做/撤销，许多快捷方式

🔻自托管部署

version: "3.8"

services:
  app_prod:
    image: ghcr.io/b310-digital/teammapper:latest
    environment:
      MODE: PROD
      BINDING: "0.0.0.0"
      POSTGRES_DATABASE: teammapper-db
      POSTGRES_HOST: postgres_prod
      POSTGRES_PASSWORD:
      POSTGRES_PORT: 5432
      POSTGRES_SSL: false
      POSTGRES_SSL_REJECT_UNAUTHORIZED: false
      POSTGRES_USER: teammapper-user
      POSTGRES_QUERY_TIMEOUT: 100000
      POSTGRES_STATEMENT_TIMEOUT: 100000
      DELETE_AFTER_DAYS: 30
    ports:
      - 80:3000
    depends_on:
      - postgres_prod

  postgres_prod:
    image: postgres:12-alpine
    # Pass config parameters to the postgres server.
    # Find more information below when you need to generate the ssl-relevant file your self
    # command: -c ssl=on -c ssl_cert_file=/var/lib/postgresql/server.crt -c ssl_key_file=/var/lib/postgresql/server.key
    environment:
      PGDATA: /var/lib/postgresql/data/pgdata
      POSTGRES_DB: teammapper-db
      POSTGRES_PASSWORD:
      POSTGRES_PORT: 5432
      POSTGRES_USER: teammapper-user
    volumes:
      # To setup an ssl-enabled postgres server locally, you need to generate a self-signed ssl certificate.
      # See README.md for more information.
      # Mount the ssl_cert_file and ssl_key_file into the docker container.
      - ./ca/server.crt:/var/lib/postgresql/server.crt
      - ./ca/server.key:/var/lib/postgresql/server.key
      - postgres_prod_data:/var/lib/postgresql/data/pgdata

volumes:
  postgres_prod_data:

| 四、比收费更好用的原型设计软件——Penpot

Penpot是一款面向跨领域团队的开源原型设计系统，依托Web端进行设计人员的协同工作，支持使用他人上传到Penpot 的设计。

在线使用：https://penpot.app/

65f06bf7ee20a1291.gif_e1080.gif

🔴项目特性：

  • penpot 是一个开源的矢量图形编辑器和设计工具，类似于 Adobe Illustrator。
  • 支持创建可缩放的矢量图形，适合用于网页设计、图标设计等。
  • 支持导出为 SVG、PDF、PNG 等格式。
  • 将设计元素转化为组件和令牌，以实现可重用性和可扩展性
  • 使用 Penpot，您可以设计可共享和重用的库
  • 构建真实的用户流程和交互。

🔻自托管部署

# 下载compose代码
curl -o docker-compose.yaml https://raw.gitmirror.com/penpot/penpot/main/docker/images/docker-compose.yaml

# 启动项目
docker compose -p penpot -f docker-compose.yaml up -d

| 五、超越notion的下一代文本/白板知识库——AFFiNE

AFFiNE（发音为 ə‘fain）是一个集规划、分类和创建于一体的下一代知识库，隐私第一、开源、可定制且随时可用。项目拥有页面（文档）视图和无界（白板）视图，在不同视图中，任何元素都可以轻松组合、拼接，而且各视图间可实现快速切换与元素链接。

在线使用：https://app.affine.pro/workspace/

image.png

🔴项目特性：

👍任何形式块的真正画布。文档和白板现已完全合并，支持富文本、便签、任何嵌入式网页、多视图数据库、链接页面、形状甚至幻灯片。
🌐多模式人工智能合作伙伴已准备好开展任何工作
🙌本地优先和实时协作
🎉自托管并塑造您自己的 AFFiNE

🔻自托管部署

services:
  affine:
     #镜像标签选择stable为稳定版，选择canary为最新发布版本
    image: ghcr.io/toeverything/affine-graphql:stable
    # image: ghcr.io/toeverything/affine-graphql:canary
    container_name: affine_selfhosted
    command:
      ['sh', '-c', 'node ./scripts/self-host-predeploy && node ./dist/index.js']
    ports:
      - '56789:3010'                    #WebUI端口
      - '56788:5555'
    depends_on:
      redis:
        condition: service_healthy
      postgres:
        condition: service_healthy
    volumes:
      - ./config:/root/.affine/config           #自定义配置文件存储路径
      - ./storage:/root/.affine/storage       #自定义存储文件路径
    logging:
      driver: 'json-file'
      options:
        max-size: '1000m'
    restart: unless-stopped
    environment:
      - NODE_OPTIONS="--import=./scripts/register.js"
      - AFFINE_CONFIG_PATH=/root/.affine/config
      - REDIS_SERVER_HOST=redis
      - DATABASE_URL=postgres://affine:affine@postgres:5432/affine
      - NODE_ENV=production
      - AFFINE_ADMIN_EMAIL=cgakki@wx.com   #Affine官方注册的云端账号
      - AFFINE_ADMIN_PASSWORD=a123456      #Affine官方注册的云端密码
  redis:
    image: redis
    container_name: affine_redis
    restart: unless-stopped
    volumes:
      - ./redis:/data                               #自定义redis存储路径
    healthcheck:
      test: ['CMD', 'redis-cli', '--raw', 'incr', 'ping']
      interval: 10s
      timeout: 5s
      retries: 5
  postgres:
    image: postgres
    container_name: affine_postgres
    restart: unless-stopped
    volumes:
      - ./postgres:/var/lib/postgresql/data    #自定义postgres存储路径
    healthcheck:
      test: ['CMD-SHELL', 'pg_isready -U affine']
      interval: 10s
      timeout: 5s
      retries: 5
    environment:
      POSTGRES_USER: affine
      POSTGRES_PASSWORD: affine
      POSTGRES_DB: affine
      PGDATA: /var/lib/postgresql/data/pgdata

| 六、文本描述生成UML图——PlantUML

PlantUML是一个开源工具，允许用户通过简单的文本描述创建各种UML图的组件。除了各种UML图，PlantUML还支持各种其他软件开发相关格式，以及JSON和YAML文件的可视化，最终提供了一种简单的方法来创建复杂系统的可视化表示。

在线使用：https://www.plantuml.com/plantuml/uml/

image.png

🔴项目特性：

创建：主持并创建自己的思维导图
自定义：添加图像、象形图 、颜色、字体属性和节点链接
协作：与朋友和同事分享你的思维导图，使用仅查看或修改邀请！
互操作性：导入和导出功能（JSON，SVG，PDF，PNG.）
可共享性：使用QR码或URL共享
GDPR合规性：默认情况下，思维导图将在30天后删除
可用性：重做/撤销，许多快捷方式

🔻自托管部署

version: "3.9"

services:
  plantuml:
    image: plantuml/plantuml-server:latest
    container_name: plantuml
    ports:
      - 8080:8080
    volumes:
      - /volume1/docker/plantuml:/tmp/jetty:rw

| 七、用画图来管理数据库——DrawDB

DrawDB是一款免费、简单、直观的在线数据库设计工具和SQL生成器。它拥有一个强大且用户友好的数据库实体关系（DBER）编辑器，就在您的浏览器中。只需点击几下即可构建图表，导出SQL脚本，自定义编辑器，以及更多功能，而无需创建帐户。在这里查看完整的功能集。

在线使用：https://www.drawdb.app/editor

drawdb.gif

🔴项目特性：

创建：主持并创建自己的思维导图
自定义：添加图像、象形图 、颜色、字体属性和节点链接
协作：与朋友和同事分享你的思维导图，使用仅查看或修改邀请！
互操作性：导入和导出功能（JSON，SVG，PDF，PNG.）
可共享性：使用QR码或URL共享
GDPR合规性：默认情况下，思维导图将在30天后删除
可用性：重做/撤销，许多快捷方式

🔻自托管部署

version: "3.9"

services:
  drawdb:
    container_name: drawdb
    image: xinsodev/drawdb
    ports:
      - 8080:80