Integracja z AI (serwer MCP)

Diagrammix zawiera wbudowany serwer MCP (Model Context Protocol), który pozwala asystentom AI takim jak Claude i Codex bezpośrednio odczytywać i modyfikować Twoje diagramy. Opisz czego potrzebujesz w prostym języku, a AI umieści symbole, łączniki i układy na obszarze roboczym za Ciebie.

Co potrafi AI?

  • Tworzenie diagramów z opisu — poproś o schemat blokowy, topologię sieci lub schemat organizacyjny i natychmiast otrzymaj go na obszarze roboczym
  • Tworzenie map myśli — opisz temat i otrzymaj ustrukturyzowaną mapę myśli
  • Odczyt dokumentu — AI widzi Twoje bieżące kształty, łączniki, warstwy i style
  • Modyfikacja istniejących elementów — aktualizuj tekst, kolory, pozycje lub trasowanie łączników
  • Operacje wsadowe — twórz całe diagramy z symbolami i łącznikami w jednym kroku
  • Automatyczny układ i wyrównanie — organizuj elementy za pomocą poleceń w języku naturalnym
  • Odtwarzanie wyglądu z obrazu — przekaż AI obraz referencyjny, a zbuduje pasujący niestandardowy szablon i styl
  • Eksport — generuj wyjście SVG na żądanie

Wymagania

  • Diagrammix PRO (jednorazowy zakup)
  • Diagrammix musi być uruchomiony z włączonym serwerem MCP
  • Co najmniej jeden dokument diagramu musi być otwarty
  • Klient AI i Diagrammix muszą być na tej samej maszynie (localhost)

Nie jest wymagany Node.js, npx ani mcp-remote — Diagrammix zawiera wbudowanego natywnego pomocnika dla klientów, które go wymagają.

Konfiguracja

1. Włącz serwer MCP

  1. Otwórz Diagrammix
  2. Przejdź do Diagrammix > Ustawienia (lub naciśnij Cmd+,)
  3. Przejdź do karty Integracja z AI
  4. Włącz Włącz integrację z AI (serwer MCP)

Serwer uruchamia się na http://localhost:8420/mcp.

2. Skonfiguruj Claude Desktop

Claude Desktop łączy się przez stdio. Diagrammix zawiera natywnego pomocnika stdio wewnątrz pakietu aplikacji, więc nie jest wymagany Node.js, npx ani mcp-remote.

  1. Kliknij Kopiuj konfigurację w ustawieniach Diagrammix — spowoduje to wypełnienie dokładnej ścieżki do wbudowanego pomocnika dla Twojej instalacji
  2. Otwórz plik konfiguracyjny Claude Desktop: ~/Library/Application Support/Claude/claude_desktop_config.json
  3. Wklej konfigurację. Wygląda ona tak — ścieżka command wskazuje pomocnika wewnątrz miejsca, w którym zainstalowano Diagrammix.app:
{
  "mcpServers": {
    "diagrammix": {
      "command": "/Applications/Diagrammix.app/Contents/MacOS/diagrammix-mcp-stdio",
      "args": ["--url", "http://localhost:8420/mcp"]
    }
  }
}

Uwaga: Używaj przycisku Kopiuj konfigurację zamiast ręcznego wpisywania ścieżki — wskazuje on pomocnika wewnątrz rzeczywistego pakietu Twojej aplikacji, który Diagrammix utrzymuje podpisany i aktualny.

  1. Uruchom ponownie Claude Desktop. Narzędzia Diagrammix pojawią się w czacie.

3. Skonfiguruj Claude Code (CLI)

Dodaj do pliku .mcp.json projektu lub globalnie w ~/.claude/mcp.json:

{
  "mcpServers": {
    "diagrammix": {
      "type": "url",
      "url": "http://localhost:8420/mcp"
    }
  }
}

Claude Code obsługuje natywnie Streamable HTTP — mostek nie jest potrzebny.

4. Skonfiguruj Codex

Codex (aplikacja, CLI i rozszerzenie IDE współdzielą jedną konfigurację MCP) łączy się przez Streamable HTTP. Skonfiguruj go na jeden z dwóch sposobów:

Opcja A — config.toml. Kliknij Kopiuj konfigurację w sekcji Codex w ustawieniach Diagrammix i wklej do ~/.codex/config.toml:

[mcp_servers.diagrammix]
url = "http://localhost:8420/mcp"
enabled = true
default_tools_approval_mode = "prompt"
startup_timeout_sec = 20
tool_timeout_sec = 60

Opcja B — CLI. Kliknij Kopiuj polecenie w ustawieniach Diagrammix lub uruchom:

codex mcp add diagrammix --url http://localhost:8420/mcp

5. Inni klienci MCP

Dowolny klient kompatybilny z MCP może się połączyć używając:

  • Transport: Streamable HTTP
  • Endpoint: http://localhost:8420/mcp
  • Protokół: JSON-RPC 2.0 przez HTTP POST

Uwaga: ChatGPT Desktop wymaga HTTPS i nie obsługuje bezpośrednio połączeń localhost.

Przykłady użycia

Utwórz schemat blokowy

„Utwórz schemat blokowy z elementami Start, Decyzja, Proces A, Proces B i Koniec. Połącz Start z Decyzją, Decyzję z Procesem A (Tak) i Procesem B (Nie), oraz oba procesy z Końcem."

AI użyje batch_create do umieszczenia wszystkich symboli i łączników w jednym kroku cofania.

Modyfikuj istniejący diagram

„Zmień kolor wypełnienia wszystkich prostokątów na niebieski i pogrub tekst."

AI odczyta Twoje elementy za pomocą get_elements, a następnie zaktualizuje każdy z nich za pomocą update_element.

Automatyczny układ

„Zastosuj układ od góry do dołu z odstępem 60px między wierszami."

AI wywoła apply_layout z preferowanym kierunkiem i odstępami.

Odtwarzanie wyglądu z obrazu

„Oto zrzut ekranu stylu diagramu naszej marki. Odtwórz te kształty i kolory jako niestandardowy szablon i styl, który mogę ponownie używać."

Przekaż asystentowi obraz referencyjny, a może on wygenerować pasujące kształty SVG i groty strzałek, złożyć je w niestandardowy szablon i zdefiniować pasujący niestandardowy styl. Używa narzędzi takich jak create_custom_template, add_custom_shape, add_custom_arrowhead i create_style, więc wynikiem jest pakiet wielokrotnego użytku — nie jednorazowy rysunek.

Wskazówki

  • Zacznij od opisu — im bardziej szczegółowy jesteś, tym lepszy wynik
  • Iteruj — poproś AI o dostosowanie kolorów, etykiet lub układu po początkowym utworzeniu
  • Cofaj swobodnie — wszystkie zmiany AI obsługują cofanie za pomocą Cmd+Z
  • Używaj symboli notacji — poproś AI o użycie konkretnych pakietów notacji dla spójnego stylu
  • Tryb wsadowy jest lepszy — dla nowych diagramów AI tworzy wszystko w jednym kroku, więc cofanie przywraca całość