Skip to content

README.pt.md

Latest commit

 

History

History
203 lines (143 loc) · 10.2 KB

README.pt.md

File metadata and controls

203 lines (143 loc) · 10.2 KB

FossFLOW - Ferramenta de Diagramas Isométricos fossflow

English | 简体中文 | Español | Português | Français | हिन्दी | বাংলা | Русский | Bahasa Indonesia | Deutsch

Olá! Aqui é o Stan, se você usou o FossFLOW e ele te ajudou, eu realmente agradeceria se você pudesse doar algo pequeno :) Eu trabalho em tempo integral, e encontrar tempo para trabalhar neste projeto já é desafiador o suficiente. Se eu implementei um recurso para você ou corrigi um bug, seria ótimo se você pudesse :) se não, não há problema, este software sempre será gratuito!

Também! Se você ainda não o fez, por favor confira a biblioteca subjacente na qual isso é construído por @markmanx Eu realmente estou sobre os ombros de um gigante aqui 🫡

ko-fi

image https://buymeacoffee.com/stan.smith

Obrigado,

-Stan

Experimente online

Vá para --> https://stan-smith.github.io/FossFLOW/ <--

FossFLOW é um poderoso Progressive Web App (PWA) de código aberto para criar belos diagramas isométricos. Construído com React e a biblioteca Isoflow (Agora bifurcada e publicada no NPM como fossflow), ele roda inteiramente no seu navegador com suporte offline.

Screenshot_20250630_160954

Atualizações Recentes (Outubro 2025)

Suporte Multilíngue

  • 8 Idiomas Suportados - Tradução completa da interface em inglês, chinês (simplificado), espanhol, português (brasileiro), francês, hindi, bengali e russo
  • Seletor de Idioma - Seletor de idioma fácil de usar no cabeçalho do aplicativo
  • Tradução Completa - Todos os menus, diálogos, configurações, dicas de ferramentas e conteúdo de ajuda traduzidos
  • Consciente de Localidade - Detecta e lembra automaticamente sua preferência de idioma

Ferramenta de Conector Aprimorada

  • Criação Baseada em Cliques - Novo modo padrão: clique no primeiro nó, depois no segundo nó para conectar
  • Opção de Modo de Arrastar - O arrastar e soltar original ainda está disponível através das configurações
  • Seleção de Modo - Alterne entre os modos de clique e arrastar em Configurações → aba Conectores
  • Melhor Confiabilidade - O modo de clique fornece criação de conexão mais previsível

Importação de Ícones Personalizados

  • Importe Seus Próprios Ícones - Carregue ícones personalizados (PNG, JPG, SVG) para usar em seus diagramas
  • Dimensionamento Automático - Os ícones são dimensionados automaticamente para tamanhos consistentes para aparência profissional
  • Alternar Isométrico/Plano - Escolha se os ícones importados aparecem como 3D isométrico ou 2D plano
  • Persistência Inteligente - Ícones personalizados são salvos com diagramas e funcionam em todos os métodos de armazenamento
  • Recursos de Ícones - Encontre ícones gratuitos em:

Suporte de Armazenamento no Servidor

  • Armazenamento Persistente - Diagramas salvos no sistema de arquivos do servidor, persistem entre sessões do navegador
  • Acesso Multi-dispositivo - Acesse seus diagramas de qualquer dispositivo ao usar implantação Docker
  • Detecção Automática - A interface do usuário mostra automaticamente o armazenamento do servidor quando disponível
  • Proteção contra Sobrescrita - Diálogo de confirmação ao salvar com nomes duplicados
  • Integração Docker - Armazenamento no servidor habilitado por padrão em implantações Docker

Recursos de Interação Aprimorados

  • Teclas de Atalho Configuráveis - Três perfis (QWERTY, SMNRCT, Nenhum) para seleção de ferramentas com indicadores visuais
  • Controles de Panorâmica Avançados - Múltiplos métodos de panorâmica incluindo arrastar área vazia, clique do meio/direito, teclas modificadoras (Ctrl/Alt) e navegação por teclado (Setas/WASD/IJKL)
  • Alternar Setas do Conector - Opção para mostrar/ocultar setas em conectores individuais
  • Seleção de Ferramenta Persistente - A ferramenta de conector permanece ativa após criar conexões
  • Diálogo de Configurações - Configuração centralizada para teclas de atalho e controles de panorâmica

Melhorias de Docker e CI/CD

  • Builds Docker Automatizadas - Fluxo de trabalho do GitHub Actions para implantação automática do Docker Hub em commits
  • Suporte Multi-arquitetura - Imagens Docker para linux/amd64 e linux/arm64
  • Imagens Pré-construídas - Disponíveis em stnsmith/fossflow:latest

Arquitetura Monorepo

  • Repositório único para biblioteca e aplicação
  • NPM Workspaces para gerenciamento de dependências simplificado
  • Processo de build unificado com npm run build na raiz

Correções de Interface

  • Corrigido problema de exibição de ícones da barra de ferramentas do editor Quill
  • Resolvidos avisos de chave React em menus de contexto
  • Melhorado estilo do editor de markdown

Características

  • 🎨 Diagramação Isométrica - Crie impressionantes diagramas técnicos em estilo 3D
  • 💾 Salvamento Automático - Seu trabalho é salvo automaticamente a cada 5 segundos
  • 📱 Suporte PWA - Instale como um aplicativo nativo no Mac e Linux
  • 🔒 Privacidade em Primeiro Lugar - Todos os dados armazenados localmente no seu navegador
  • 📤 Importar/Exportar - Compartilhe diagramas como arquivos JSON
  • 🎯 Armazenamento de Sessão - Salvamento rápido sem diálogos
  • 🌐 Suporte Offline - Trabalhe sem conexão à internet
  • 🗄️ Armazenamento no Servidor - Armazenamento persistente opcional ao usar Docker (habilitado por padrão)
  • 🌍 Multilíngue - Suporte completo para 8 idiomas: English, 简体中文, Español, Português, Français, हिन्दी, বাংলা, Русский

🐳 Implantação Rápida com Docker

# Usando Docker Compose (recomendado - inclui armazenamento persistente)
docker compose up

# Ou execute diretamente do Docker Hub com armazenamento persistente
docker run -p 80:80 -v $(pwd)/diagrams:/data/diagrams stnsmith/fossflow:latest

O armazenamento no servidor está habilitado por padrão no Docker. Seus diagramas serão salvos em ./diagrams no host.

Para desabilitar o armazenamento no servidor, defina ENABLE_SERVER_STORAGE=false:

docker run -p 80:80 -e ENABLE_SERVER_STORAGE=false stnsmith/fossflow:latest

Início Rápido (Desenvolvimento Local)

# Clonar o repositório
git clone https://github.com/stan-smith/FossFLOW
cd FossFLOW

# Instalar dependências
npm install

# Compilar a biblioteca (necessário na primeira vez)
npm run build:lib

# Iniciar servidor de desenvolvimento
npm run dev

Abra http://localhost:3000 no seu navegador.

Estrutura do Monorepo

Este é um monorepo contendo dois pacotes:

  • packages/fossflow-lib - Biblioteca de componentes React para desenhar diagramas de rede (construída com Webpack)
  • packages/fossflow-app - Progressive Web App para criar diagramas isométricos (construído com RSBuild)

Comandos de Desenvolvimento

# Desenvolvimento
npm run dev          # Iniciar servidor de desenvolvimento do aplicativo
npm run dev:lib      # Modo watch para desenvolvimento da biblioteca

# Build
npm run build        # Compilar biblioteca e aplicativo
npm run build:lib    # Compilar apenas biblioteca
npm run build:app    # Compilar apenas aplicativo

# Testes e Linting
npm test             # Executar testes unitários
npm run lint         # Verificar erros de linting

# Testes E2E (Selenium)
cd e2e-tests
./run-tests.sh       # Executar testes end-to-end (requer Docker e Python)

# Publicação
npm run publish:lib  # Publicar biblioteca no npm

Como Usar

Criar Diagramas

  1. Adicionar Itens:

    • Pressione o botão "+" no menu superior direito, a biblioteca de componentes aparecerá à esquerda
    • Arraste e solte componentes da biblioteca na tela
    • Ou clique com o botão direito na grade e selecione "Adicionar nó"

  2. Conectar Itens:

    • Selecione a ferramenta Conector (pressione 'C' ou clique no ícone do conector)
    • Modo de clique (padrão): Clique no primeiro nó, depois clique no segundo nó
    • Modo de arrastar (opcional): Clique e arraste do primeiro nó para o segundo
    • Alterne os modos em Configurações → aba Conectores

  3. Salvar Seu Trabalho:

    • Salvamento Rápido - Salva na sessão do navegador
    • Exportar - Baixar como arquivo JSON
    • Importar - Carregar de arquivo JSON

Opções de Armazenamento

  • Armazenamento de Sessão: Salvamentos temporários apagados quando o navegador fecha
  • Exportar/Importar: Armazenamento permanente como arquivos JSON
  • Salvamento Automático: Salva automaticamente as alterações a cada 5 segundos na sessão

Contribuindo

Damos as boas-vindas a contribuições! Por favor veja CONTRIBUTORS.md para diretrizes.

Documentação

Licença

MIT