Ekosystem zen crm · 37 typów · REST API & SDK

ZenDIAGRAMS
dla Twoich aplikacji.

ZenDIAGRAMS v0.7.1 Silnik infografik, diagramów procesowych i wykresów z rodziny zen crm

Wdrażasz jako kontener Docker.
Wstawiasz jednym znacznikiem <zen-diagram> lub przez Client SDK.

Nowoczesny, lekki silnik w czystym JavaScript (0 zależności zewnętrznych) zintegrowany z backendem Flask i bazą SQLite. Obsługuje 37 typów diagramów i wykresów, 28 motywów kolorystycznych, przezroczyste tła dla prezentacji oraz interaktywny drag & drop.

Jak wstawić przez SDK Kreator kodu na żywo

01 / Architektura v0.7.1

37 silników wizualizacji.
Dla dokumentacji i biznesu.

ZenDIAGRAMS łączy tradycyjne schematy inżynieryjne (Flow, Architecture, Swimlane) z nowoczesnymi infografikami slajdowymi (Chevron, Ribbon, Snake, Gear) oraz klasycznymi wykresami KPI.

Infografiki procesowe v0.7.1

10 nowych typów do prezentacji: chevron-steps, ribbon-steps, pill-steps, stair-steps, gear-process, bubble-cycle, snake-process i icon-roadmap.

Wykresy biznesowe & KPI

Wbudowane wykresy bez Chart.js: funnel-chart (lejki sprzedaży zen crm), kpi-grid, stacked-bars, quadrant (macierz 2x2) oraz gantt-lite.

Stylistyka & Transparentność

Pełne wsparcie przezroczystości (transparent: true) do osadzania na tłach stron, presety PPT (ppt-aqua, ppt-clean) oraz edytor w Visual Studio v0.7.1.

Kompatybilność z zen crm: ZenDIAGRAMS jest w pełni modułowym systemem graficznym stworzonym dla naszego CRM-a. Działa zarówno jako wbudowany panel raportowy, jak i samodzielny mikroserwis Docker do publicznego osadzania.

Dane, które opowiadają historię.

Sześć inspiracji. Wybierz przykład i nadaj mu własny styl.

02 / Client SDK & Docker

Oficjalne Client SDK.
Wstawiasz na stronę 1 linijką.

Uruchom kontener ZenDIAGRAMS z Docker Hub (kosiorekmateusz/zendiagrams) i dołącz skrypt SDK do dowolnej strony WWW, portalu czy panelu zen crm.

Zalecana metoda

Web Component <zen-diagram>

Najwygodniejszy sposób. Dołączasz jeden skrypt SDK i wstawiasz diagram bezpośrednio w HTML bez pisania kodu JS.

Wymagany znacznik: <zen-diagram server="..." slug="..." theme="aqua"></zen-diagram>
Wspierane atrybuty: server, slug, theme, height, token (dla unlisted), mode.
Wbudowany fallback: Automatycznie przełącza się na iframe, jeśli środowisko klienta blokuje dynamiczny JS.

Programistyczne API

Klasa ZenDiagramsClient

Dla aplikacji React, Vue, Next.js i skryptów backendowych Node.js. Pełna kontrola nad cyklem życia i zapisem.

Inicjalizacja: const client = new ZenDiagramsClient({ baseUrl: 'https://...' })
Metody pobierania: client.load(), client.mount(), client.get(), client.getMeta().
Zarządzanie CRUD: client.save(slug, data, { apiKey }), client.delete(slug), client.list().

Jak dodać SDK z Twojego Dockera do strony WWW

Wklej poniższy kod w sekcji <head> lub na końcu dokumentu HTML:

<!-- 1. Dołączenie oficjalnego SDK z Twojego kontenera Docker -->
<script src="https://twoj-serwer-docker.pl/assets/zendiagrams-sdk.js"></script>

<!-- 2. Wariant A: Wstawienie za pomocą Web Componentu (zero kodu JS!) -->
<zen-diagram
  server="https://twoj-serwer-docker.pl"
  slug="proces-sprzedazy"
  theme="aqua"
  height="300px">
</zen-diagram>

<!-- 3. Wariant B: Użycie programistyczne w JavaScript -->
<div id="moj-diagram"></div>
<script>
const client = new ZenDiagramsClient({
  baseUrl: 'https://twoj-serwer-docker.pl',
  defaultTheme: 'zen'
});

// Zdalne załadowanie diagramu ze sluga
client.load('#moj-diagram', 'proces-sprzedazy', { height: '320px' })
  .then(() => console.log('ZenDIAGRAMS załadowany pomyślnie!'))
  .catch(err => console.error('Błąd:', err));
</script>

03 / Silnik wyglądu

Rozbudowany wygląd & Presety.
Od szkła po prezentacje slajdowe.

ZenDIAGRAMS v0.7.1 wprowadza obiekt appearance, pozwalający na precyzyjną kontrolę łączników, przezroczystości, geometrii i gotowych presetów graficznych.

Preset / Opcja	Dostępne wartości	Działanie
`preset`	`ppt-aqua`, `ppt-clean`, `deck-dark`, `glass`, `minimal`, `bold`, `transparent`	Gotowy profil wyglądu dopasowany do slajdów, dokumentów lub nowoczesnych paneli SaaS.
`transparent`	`true` / `false`	Całkowite usunięcie tła ramki (idealne pod osadzenie na istniejącym tle strony lub slajdu PPT).
`connectorStyle`	`solid`, `dashed`, `dotted`	Styl linii łączących (np. w stepperach, pipeline, flow). Można podać `connectorWidth` i `connectorLength`.
`surfaceStyle`	`solid`, `soft`, `glass`, `outline`	Faktura kart węzłów: matowa, z efektem szkła (blur) lub minimalistyczny kontur.
`shadow`	`none`, `soft`, `medium`, `strong`, `glow`	Cienie i rozmycia elementów diagramu.

Przykładowa konfiguracja obiektu `appearance`

ZenDiagrams.mount('#diagram', {
  type: 'chevron-steps',
  theme: 'aqua',
  height: '320px',
  appearance: {
    preset: 'ppt-aqua',
    transparent: false,
    frameBorderWidth: 0,
    connectorStyle: 'dashed',
    connectorWidth: 2.5,
    connectorColor: '#2d7a4f',
    shadow: 'medium'
  },
  data: {
    steps: [
      { title: 'Lead', content: 'Nowy kontakt zen crm', color: '#2dd0cf' },
      { title: 'Kwalifikacja', content: 'Rozmowa B2B', color: '#35b7d7' },
      { title: 'Oferta', content: 'Wysłanie propozycji', color: '#298bc8' },
      { title: 'Wygrana', content: 'Podpisanie umowy', color: '#167354' }
    ]
  }
});

04 / Generator kodu

Twój diagram.
Twój styl. Gotowy kod.

Wybierz wizualizację, dopasuj kolory i zobacz efekt od razu. Pobierz konfigurację lub skopiuj diagram na swoją stronę.

01 Twój diagram

Co chcesz pokazać?

02 Nadaj mu charakter

Paleta

Styl

Tło

Wysokość

Zaokrąglenie 18 px

03 Wstaw na stronę

Sposób osadzenia

Serwer i identyfikator

Adres serwera

Identyfikator diagramu

Zmieniaj ustawienia. Diagram i kod aktualizują się automatycznie.

Kod gotowy do użycia

05 / REST API ZenDIAGRAMS

REST API mikroserwisu.
Zarządzanie i serwowanie z Dockera.

Mikroserwis Flask serwuje Client SDK, silnik diagramów oraz udostępnia pełen zestaw operacji CRUD z bazą SQLite pod kontrolą klucza X-API-Key.

Publiczny embed & Assety SDK

GET /api/v1/meta 37 typów, 28 motywów (JSON)

GET /assets/zendiagrams-sdk.js oficjalne SDK klienckie

GET /assets/diagram-embed.js silnik renderera (CORS *)

GET /api/v1/public/diagrams/:slug JSON diagramu

GET /embed/:slug strona pod iframe

GET /health status serwera

Zarządzanie diagramami (X-API-Key)

GET /api/v1/diagrams lista wszystkich (admin)

POST /api/v1/diagrams utwórz nowy diagram

GET /api/v1/diagrams/:slug szczegóły i tokeny

PATCH /api/v1/diagrams/:slug aktualizacja danych

DELETE /api/v1/diagrams/:slug trwałe usunięcie

Przykładowe żądanie utworzenia diagramu przez cURL

curl -X POST https://diagram.twojadomena.pl/api/v1/diagrams \
  -H "Content-Type: application/json" \
  -H "X-API-Key: TWOJ_TAJNY_KLUCZ_API" \
  -d '{
    "slug": "lejek-sprzedazy-crm",
    "name": "Lejek Sprzedaży Zen CRM",
    "visibility": "public",
    "diagram": {
      "type": "chevron-steps",
      "theme": "aqua",
      "height": "280px",
      "appearance": { "preset": "ppt-aqua" },
      "data": {
        "steps": [
          { "title": "Lead", "content": "Nowy kontakt", "color": "#2dd0cf" },
          { "title": "Spotkanie", "content": "Demo produktu", "color": "#35b7d7" },
          { "title": "Oferta", "content": "Wycena", "color": "#298bc8" },
          { "title": "Sukces", "content": "Wygrana szansa", "color": "#167354" }
        ]
      }
    }
  }'

Poziomy widoczności (visibility):
• public — dostępny publicznie pod /api/v1/public/diagrams/:slug oraz /embed/:slug.
• unlisted — dostępny wyłącznie po przekazaniu unikalnego tokena: ?token=xyz.
• private — dostępny wyłącznie dla autoryzowanego backendu z nagłówkiem X-API-Key.

06 / Katalog wizualizacji

37 typów wizualizacji.
Pogrupowane tematycznie.

Pełny zestaw silników wbudowanych bezpośrednio w diagram-embed.js i obsługiwanych przez Visual Studio oraz Client SDK.

Kategoria	Dostępne typy (type)	Zastosowanie
Prezentacyjne & Procesowe	`chevron-steps`, `ribbon-steps`, `pill-steps`, `stair-steps`, `gear-process`, `bubble-cycle`, `segmented-circle`, `card-process`, `snake-process`, `icon-roadmap`	Slajdy biznesowe, prezentacje, onboarding klienta, etapy wdrożenia CRM.
Wykresy & Metryki biznesowe	`funnel-chart`, `kpi-grid`, `stacked-bars`, `quadrant`, `gantt-lite`, `bar-chart`, `line-chart`, `area-chart`, `donut-chart`, `pie-chart`, `progress-bars`	Raporty sprzedaży, lejki konwersji, macierze Eisenhowera/Boston, harmonogramy.
Cykle, Pętle & Drzewa	`loop-process`, `circular-steps`, `decision-flow`, `stats-process`, `milestone-chain`, `radial-slices`, `orgchart`	Struktury organizacyjne zespołów, pętle zwrotne, drzewa decyzyjne.
Inżynieryjne & Architektura	`flow` (z drag & drop), `swimlane`, `pipeline`, `kanban`, `timeline`, `architecture`, `journey`, `matrix`, `stepper`	Architektura systemowa, procesy wielorolowe, tablice statusów, roadmapy.

07 / Wdrożenie Docker

Oficjalny obraz na Docker Hub.
kosiorekmateusz/zendiagrams

Obraz jest gotowy do pobrania z rejestru Docker Hub. Wystarczy uruchomić go na serwerze VPS, Coolify lub Kubernetes.

Uruchomienie jednym poleceniem (Docker CLI)

docker run -d -p 5000:5000 \
  -e DIAGRAM_API_KEY="twoj-tajny-klucz-api" \
  -e DIAGRAM_ALLOWED_ORIGINS="*" \
  -v diagram_data:/app/data \
  --name zendiagrams \
  kosiorekmateusz/zendiagrams:latest

Plik `docker-compose.yml` (Coolify / Portainer)

version: '3.8'
services:
  zendiagrams:
    image: kosiorekmateusz/zendiagrams:latest
    restart: unless-stopped
    ports:
      - "5000:5000"
    environment:
      - DIAGRAM_API_KEY=twoj-tajny-klucz-api
      - DIAGRAM_ALLOWED_ORIGINS=*
      - PORT=5000
    volumes:
      - diagram_data:/app/data

volumes:
  diagram_data:

Ekosystem zen crm.
ZenDIAGRAMS v0.7.1.

Wizualizuj procesy, twórz infografiki prezentacyjne i osadzaj interaktywne raporty w dowolnym miejscu za pomocą kilku linijek kodu.

Otwórz Visual Studio ↗ Galeria 37 typów Showcase ↗

Szybkie skróty

• Co nowego w v0.7.1
• Oficjalne Client SDK & Web Component
• Silnik wyglądu & presety PPT
• Kreator kodu na żywo
• Dokumentacja REST API Flask
• Test zdrowia serwera (/health)

ZenDIAGRAMSdla Twoich aplikacji.

37 silników wizualizacji.Dla dokumentacji i biznesu.

Infografiki procesowe v0.7.1

Wykresy biznesowe & KPI

Stylistyka & Transparentność

Dane, które opowiadają historię.

Oficjalne Client SDK.Wstawiasz na stronę 1 linijką.

Web Component <zen-diagram>

Klasa ZenDiagramsClient

Jak dodać SDK z Twojego Dockera do strony WWW

Rozbudowany wygląd & Presety.Od szkła po prezentacje slajdowe.

Przykładowa konfiguracja obiektu appearance

Twój diagram.Twój styl. Gotowy kod.

Proces sprzedaży

REST API mikroserwisu.Zarządzanie i serwowanie z Dockera.